feat: UI Customer Detail 2 (more detail + i18n)
This commit is contained in:
oat_dev
parent
f3a146e345
commit
ccd7364b8a
5 changed files with 177 additions and 135 deletions
|
|
@ -215,131 +215,136 @@ function undo() {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="isMainPage" class="column q-pb-lg">
|
||||
<div class="column q-pb-lg">
|
||||
<div class="text-h6 text-weight-bold q-mb-md">
|
||||
{{ $t('customerManagement') }}
|
||||
</div>
|
||||
|
||||
<div class="row full-width q-mb-md no-wrap">
|
||||
<SelectorList
|
||||
:list="selectorList"
|
||||
v-model:selector="selectorLabel"
|
||||
class="q-mr-md col-4"
|
||||
/>
|
||||
<div v-if="isMainPage">
|
||||
<div class="row full-width q-mb-md no-wrap">
|
||||
<SelectorList
|
||||
:list="selectorList"
|
||||
v-model:selector="selectorLabel"
|
||||
class="q-mr-md col-4"
|
||||
/>
|
||||
|
||||
<!-- stat -->
|
||||
<AppBox bordered class="column full-width">
|
||||
<div class="row q-pb-sm justify-between items-center">
|
||||
<div class="text-weight-bold text-subtitle1">
|
||||
{{ $t('customerStatTitle') }}
|
||||
<!-- stat -->
|
||||
<AppBox bordered class="column full-width">
|
||||
<div class="row q-pb-sm justify-between items-center">
|
||||
<div class="text-weight-bold text-subtitle1">
|
||||
{{ $t('customerStatTitle') }}
|
||||
</div>
|
||||
{{ selectorLabel }}
|
||||
<q-btn
|
||||
id="btn-add-customer"
|
||||
dense
|
||||
unelevated
|
||||
:label="'+ ' + $t('customerAdd')"
|
||||
padding="4px 16px"
|
||||
@click="openDialogCustomerType()"
|
||||
style="background-color: var(--cyan-6); color: white"
|
||||
/>
|
||||
</div>
|
||||
{{ selectorLabel }}
|
||||
<q-btn
|
||||
id="btn-add-customer"
|
||||
dense
|
||||
unelevated
|
||||
:label="'+ ' + $t('customerAdd')"
|
||||
padding="4px 16px"
|
||||
@click="openDialogCustomerType()"
|
||||
style="background-color: var(--cyan-6); color: white"
|
||||
/>
|
||||
</div>
|
||||
<div class="row full-width q-py-md" style="overflow-x: auto">
|
||||
<StatCardComponent
|
||||
v-if="customerStats"
|
||||
labelI18n
|
||||
:branch="
|
||||
customerStats.map((v) => ({
|
||||
count: v.count,
|
||||
label: v.name,
|
||||
color: v.name === 'customerLegalEntity' ? 'purple' : 'green',
|
||||
}))
|
||||
"
|
||||
:dark="$q.dark.isActive"
|
||||
class="no-wrap"
|
||||
/>
|
||||
</div>
|
||||
</AppBox>
|
||||
</div>
|
||||
<div class="row full-width q-py-md" style="overflow-x: auto">
|
||||
<StatCardComponent
|
||||
v-if="customerStats"
|
||||
labelI18n
|
||||
:branch="
|
||||
customerStats.map((v) => ({
|
||||
count: v.count,
|
||||
label: v.name,
|
||||
color: v.name === 'customerLegalEntity' ? 'purple' : 'green',
|
||||
}))
|
||||
"
|
||||
:dark="$q.dark.isActive"
|
||||
class="no-wrap"
|
||||
/>
|
||||
</div>
|
||||
</AppBox>
|
||||
</div>
|
||||
|
||||
<!-- main -->
|
||||
<AppBox bordered class="column" style="width: 100%; min-height: 70vh">
|
||||
<div v-if="false" class="row q-mb-md justify-between">
|
||||
<div class="col-1 self-end">
|
||||
<div class="row">
|
||||
<TooltipComponent
|
||||
title="customerTooltipTitle"
|
||||
caption="customerTooltipCaption"
|
||||
imgSrc="personnel-table-"
|
||||
<!-- main -->
|
||||
<AppBox bordered class="column" style="width: 100%; min-height: 70vh">
|
||||
<div v-if="false" class="row q-mb-md justify-between">
|
||||
<div class="col-1 self-end">
|
||||
<div class="row">
|
||||
<TooltipComponent
|
||||
title="customerTooltipTitle"
|
||||
caption="customerTooltipCaption"
|
||||
imgSrc="personnel-table-"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="col self-center"
|
||||
style="display: flex; flex-grow: 1; align-items: center"
|
||||
>
|
||||
<AddButton
|
||||
:label="'customerAdd'"
|
||||
:cyanOn="true"
|
||||
@trigger="openDialogCustomerType()"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="col self-center"
|
||||
style="display: flex; flex-grow: 1; align-items: center"
|
||||
class="row full-width customer-row"
|
||||
:style="`grid-template-columns: repeat(${$q.screen.lt.sm ? '1' : '4'}, 1fr)`"
|
||||
>
|
||||
<AddButton
|
||||
:label="'customerAdd'"
|
||||
:cyanOn="true"
|
||||
@trigger="openDialogCustomerType()"
|
||||
<UsersDetailCardComponent
|
||||
color="purple"
|
||||
:metadata="{ id: '1', disabled: false }"
|
||||
:list="{
|
||||
id: '1',
|
||||
type: 'customerLegalEntity',
|
||||
name: 'เจมส์ บอน',
|
||||
code: 'HQ007',
|
||||
detail: [
|
||||
{
|
||||
label: 'ชื่อบริษัท/นิติบุคคล ภาษาไทย',
|
||||
value: 'บริษัทลับ',
|
||||
},
|
||||
{
|
||||
label: 'ชื่อบริษัท/นิติบุคคล ภาษาไทย',
|
||||
value: 'บริษัทลับ',
|
||||
},
|
||||
],
|
||||
}"
|
||||
@enter-card="isMainPage = false"
|
||||
@view-card="openDialogInputForm"
|
||||
/>
|
||||
<UsersDetailCardComponent
|
||||
color="green"
|
||||
:metadata="{ id: '1', disabled: false }"
|
||||
:list="{
|
||||
id: '2',
|
||||
type: 'customerNaturalPerson',
|
||||
name: 'ขอบใจ ขอบใจ',
|
||||
code: 'HQ006',
|
||||
detail: [
|
||||
{
|
||||
label: 'ชื่อบริษัท/นิติบุคคล ภาษาไทย',
|
||||
value: 'บริษัทเฟรบเป้',
|
||||
},
|
||||
{
|
||||
label: 'ชื่อบริษัท/นิติบุคคล ภาษาไทย',
|
||||
value: 'บริษัทเฟรบเป้',
|
||||
},
|
||||
],
|
||||
}"
|
||||
@enter-card="console.log('enter')"
|
||||
@view-card="openDialogInputForm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="row full-width customer-row"
|
||||
:style="`grid-template-columns: repeat(${$q.screen.lt.sm ? '1' : '4'}, 1fr)`"
|
||||
>
|
||||
<UsersDetailCardComponent
|
||||
color="purple"
|
||||
:metadata="{ id: '1', disabled: false }"
|
||||
:list="{
|
||||
id: '1',
|
||||
type: 'customerLegalEntity',
|
||||
name: 'เจมส์ บอน',
|
||||
code: 'HQ007',
|
||||
detail: [
|
||||
{
|
||||
label: 'ชื่อบริษัท/นิติบุคคล ภาษาไทย',
|
||||
value: 'บริษัทลับ',
|
||||
},
|
||||
{
|
||||
label: 'ชื่อบริษัท/นิติบุคคล ภาษาไทย',
|
||||
value: 'บริษัทลับ',
|
||||
},
|
||||
],
|
||||
}"
|
||||
@enter-card="isMainPage = false"
|
||||
@view-card="openDialogInputForm"
|
||||
/>
|
||||
<UsersDetailCardComponent
|
||||
color="green"
|
||||
:metadata="{ id: '1', disabled: false }"
|
||||
:list="{
|
||||
id: '2',
|
||||
type: 'customerNaturalPerson',
|
||||
name: 'ขอบใจ ขอบใจ',
|
||||
code: 'HQ006',
|
||||
detail: [
|
||||
{
|
||||
label: 'ชื่อบริษัท/นิติบุคคล ภาษาไทย',
|
||||
value: 'บริษัทเฟรบเป้',
|
||||
},
|
||||
{
|
||||
label: 'ชื่อบริษัท/นิติบุคคล ภาษาไทย',
|
||||
value: 'บริษัทเฟรบเป้',
|
||||
},
|
||||
],
|
||||
}"
|
||||
@enter-card="console.log('enter')"
|
||||
@view-card="openDialogInputForm"
|
||||
/>
|
||||
</div>
|
||||
</AppBox>
|
||||
</div>
|
||||
<div v-else>
|
||||
<CustomerInfoComponent @back="isMainPage = true" />
|
||||
</AppBox>
|
||||
</div>
|
||||
<div v-else>
|
||||
<CustomerInfoComponent
|
||||
@back="isMainPage = true"
|
||||
@viewDetail="console.log('view detail')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<FormDialog
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue