Untitled
unknown
javascript
25 days ago
8.6 kB
1
Indexable
Never
<template> <q-toggle v-model="advancedSearch" checked-icon="check" unchecked-icon="clear" label="Filter Lanjutan" style="margin-left: -8px; margin-bottom: 8px" /> <div v-if="advancedSearch"> <div class="flex items-end text-primary" style="gap: 4px"> <q-icon name="place" size="sm" /> <div class="text-weight-bold">Wilayah</div> </div> <div class="row q-mt-xs q-mb-md" style="gap: 8px"> <div class="col-12 col-md-3"> <q-select v-model="bum.value" dense outlined label="BUM" option-value="id" option-label="text" :loading="bum.loading" :options="bum.options" @update:model-value="handleGetProv" /> </div> <div class="col-12 col-md-3"> <q-select v-model="provinsi.value" dense outlined label="PROVINSI" option-value="id" option-label="text" :loading="provinsi.loading" :options="provinsi.options" @update:model-value="handleGetKabkot" > <template v-slot:no-option> <q-item> <q-item-section class="text-italic text-grey"> Pilih BUM Dahulu </q-item-section> </q-item> </template> </q-select> </div> <div class="col-12 col-md-3"> <q-select v-model="kabkot.value" dense outlined label="KABUPATEN" option-value="id" option-label="text" :loading="kabkot.loading" :options="kabkot.options" @update:model-value="handleGetRegional" > <template v-slot:no-option> <q-item> <q-item-section class="text-italic text-grey"> Pilih PROVINSI Dahulu </q-item-section> </q-item> </template> </q-select> </div> <div class="col-12 col-md-3"> <q-select v-model="regional.value" dense outlined label="REGIONAL" option-value="id" option-label="text" :loading="regional.loading" :options="regional.options" @update:model-value="handleGetArea" > <template v-slot:no-option> <q-item> <q-item-section class="text-italic text-grey"> Pilih KABUPATEN Dahulu </q-item-section> </q-item> </template> </q-select> </div> <div class="col-12 col-md-3"> <q-select v-model="area.value" dense outlined label="AREA" option-value="id" option-label="text" :loading="area.loading" :options="area.options" @update:model-value="handleGetUnit" > <template v-slot:no-option> <q-item> <q-item-section class="text-italic text-grey"> Pilih REGIONAL Dahulu </q-item-section> </q-item> </template> </q-select> </div> <div class="col-12 col-md-3"> <q-select v-model="unit.value" dense outlined label="UNIT" option-value="id" option-label="text" :loading="unit.loading" :options="unit.options" @update:model-value="handleGetTipe" > <template v-slot:no-option> <q-item> <q-item-section class="text-italic text-grey"> Pilih AREA Dahulu </q-item-section> </q-item> </template> </q-select> </div> </div> <div class="flex items-end text-primary" style="gap: 4px"> <q-icon name="list" size="sm" /> <div class="text-weight-bold">Lainnya</div> </div> <div class="row q-mt-xs q-mb-md" style="gap: 8px"> <div class="col-12 col-md-3"> <q-select v-model="tipe.value" dense outlined label="TIPE CABANG" option-value="id" option-label="text" :loading="tipe.loading" :options="tipe.options" > <template v-slot:no-option> <q-item> <q-item-section class="text-italic text-grey"> Pilih UNIT Dahulu </q-item-section> </q-item> </template> </q-select> </div> <div class="col-12 col-md-3"> <q-select dense outlined label="FOTO" option-value="id" option-label="text" /> </div> </div> </div> </template> <script> import { getFilterWilayahNasabah } from "src/api"; export default { data: () => ({ advancedSearch: false, bum: { value: "", options: [], loading: false, }, provinsi: { value: "", options: [], loading: false, }, kabkot: { value: "", options: [], loading: false, }, regional: { value: "", options: [], loading: false, }, area: { value: "", options: [], loading: false, }, unit: { value: "", options: [], loading: false, }, tipe: { value: "", options: [], loading: false, }, }), mounted() { this.handleGetBum(); }, methods: { handleResetOptions(types = []) { types.map((type) => { this[type] = { value: "", options: [], }; }); }, handleGetWilayah(params, type) { this[type].loading = true; getFilterWilayahNasabah(params) .then(({ data }) => { if (data.response_code === 300) { this[type].options = data.data; } resolve(); }) .finally(() => (this[type].loading = false)); }, handleGetBum() { const params = { jenis: "bum", }; this.handleGetWilayah(params, "bum"); }, handleGetProv(props) { this.handleResetOptions([ "provinsi", "kabkot", "regional", "area", "unit", "tipe", ]); const params = { jenis: "provinsi", bum: props.text, }; this.handleGetWilayah(params, "provinsi"); }, handleGetKabkot(props) { this.handleResetOptions(["kabkot", "regional", "area", "unit", "tipe"]); const params = { jenis: "kabkot", bum: this.bum.value, provinsi: props.text, }; this.handleGetWilayah(params, "kabkot"); }, handleGetRegional(props) { this.handleResetOptions(["regional", "area", "unit", "tipe"]); const params = { jenis: "regional", bum: this.bum.value, provinsi: this.provinsi.value, kabkot: props.text, }; this.handleGetWilayah(params, "regional"); }, handleGetArea(props) { this.handleResetOptions(["area", "unit", "tipe"]); const params = { jenis: "area", bum: this.bum.value, provinsi: this.provinsi.value, kabkot: this.kabkot.value, regional: props.text, }; this.handleGetWilayah(params, "area"); }, handleGetUnit(props) { this.handleResetOptions(["unit", "tipe"]); const params = { jenis: "unit", bum: this.bum.value, provinsi: this.provinsi.value, kabkot: this.kabkot.value, regional: this.regional.value, area: props.text, }; this.handleGetWilayah(params, "unit"); }, handleGetTipe(props) { this.handleResetOptions(["tipe"]); const params = { jenis: "unit", bum: this.bum.value, provinsi: this.provinsi.value, kabkot: this.kabkot.value, regional: this.regional.value, area: this.area.value, unit: props.text, }; this.handleGetWilayah(params, "tipe"); }, }, }; </script> <style lang="scss"> .search-advanced { width: 100%; } @media (min-width: $breakpoint-md-min) { .search-advanced { width: 94.2%; } } </style>