chamomind/jws-frontend
chamomind/jws-frontend
6
0
Fork 0
Code Issues Projects Releases Packages 1 Wiki Activity Actions

feat: filter ทั้งหมด สาขาใหญ่ สาขา

Browse source
This commit is contained in:
Net 2024-04-17 11:33:41 +07:00
parent 5442477e7d
commit c0008e1c18
1 changed files with 39 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

64
src/pages/01_branch-management/MainPage.vue
View file

@ -60,7 +60,7 @@ onMounted(async () => {
watch(locale, () => { watch(locale, () => {
console.log(locale.value); console.log(locale.value);
}); });
const fieldBranch = ref(['all', 'branchHQLabel', 'branchLabel']);
const fieldDisplay = ref([ const fieldDisplay = ref([
'branchLabelName', 'branchLabelName',
'branchLabelTel', 'branchLabelTel',
@ -69,6 +69,14 @@ const fieldDisplay = ref([
'branchLabelStatus', 'branchLabelStatus',
]); ]);
const fieldSelected = ref<string[]>(fieldDisplay.value); const fieldSelected = ref<string[]>(fieldDisplay.value);
const fieldSelectedBranch = ref<{
label: string;
value: string;
}>({
label: 'ทั้งหมด',
value: 'all',
});
const stats = ref<{ count: number; label: string }[]>([]); const stats = ref<{ count: number; label: string }[]>([]);
const defaultFormData = { const defaultFormData = {
@ -155,16 +163,12 @@ function clearData() {
<div class="q-mb-md flex" style="gap: var(--size-4)"> <div class="q-mb-md flex" style="gap: var(--size-4)">
<div style="flex-grow: 1"> <div style="flex-grow: 1">
<q-select <q-select
:options="
fieldDisplay.map((v) => ({ label: $t(v), value: v }))
"
v-model="fieldSelected"
option-label="label"
option-value="value"
map-options
emit-value
outlined outlined
multiple v-model="fieldSelectedBranch"
:options="
fieldBranch.map((v) => ({ label: $t(v), value: v }))
"
:label="$t('select')"
dense dense
/> />
</div> </div>
@ -186,21 +190,31 @@ function clearData() {
</div> </div>
<div class="branch-container"> <div class="branch-container">
<BranchCard <BranchCard
v-for="item in branchData.result.map((v) => ({ v-for="item in branchData.result
id: v.id, .map((v) => ({
hq: v.isHeadOffice, id: v.id,
branchLabelCode: v.code, hq: v.isHeadOffice,
branchLabelName: $i18n.locale === 'en-US' ? v.nameEN : v.name, branchLabelCode: v.code,
branchLabelTel: v.telephoneNo, branchLabelName:
branchLabelAddress: $i18n.locale === 'en-US' ? v.nameEN : v.name,
$i18n.locale === 'en-US' branchLabelTel: v.telephoneNo,
? `${v.addressEN || ''} ${v.subDistrict?.nameEN || ''} ${v.district?.nameEN || ''} ${v.province?.nameEN || ''}` branchLabelAddress:
: `${v.address || ''} ${v.subDistrict?.name || ''} ${v.district?.name || ''} ${v.province?.name || ''}`, $i18n.locale === 'en-US'
branchLabelType: $t( ? `${v.addressEN || ''} ${v.subDistrict?.nameEN || ''} ${v.district?.nameEN || ''} ${v.province?.nameEN || ''}`
v.isHeadOffice ? 'branchHQLabel' : 'branchLabel', : `${v.address || ''} ${v.subDistrict?.name || ''} ${v.district?.name || ''} ${v.province?.name || ''}`,
), branchLabelType: $t(
branchLabelStatus: v.status, v.isHeadOffice ? 'branchHQLabel' : 'branchLabel',
}))" ),
branchLabelStatus: v.status,
}))
.filter(
(b) =>
fieldSelectedBranch.value === 'all' ||
b.hq ===
(fieldSelectedBranch.value === 'branchHQLabel'
? true
: false),
)"
:key="item.id" :key="item.id"
:data="item" :data="item"
:field-selected="fieldSelected" :field-selected="fieldSelected"