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