refactor: lay out
This commit is contained in:
oat_dev
parent
199815f78e
commit
c50e775c11
2 changed files with 146 additions and 166 deletions
|
|
@ -42,7 +42,7 @@ withDefaults(
|
|||
<div
|
||||
bordered
|
||||
:class="{ 'is-add-product': isAddProduct }"
|
||||
class="column bordered rounded q-pa-sm no-wrap"
|
||||
class="column bordered rounded q-pa-sm no-wrap surface-1"
|
||||
style="height: 20rem"
|
||||
@click="$emit('select', data)"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1559,119 +1559,13 @@ watch(inputSearchProductAndService, async () => {
|
|||
<!-- product/service -->
|
||||
<div
|
||||
v-else-if="productMode === 'service'"
|
||||
class="surface-1 col bordered rounded column"
|
||||
class="surface-2 col bordered rounded column"
|
||||
>
|
||||
<div
|
||||
class="row justify-between items-center surface-1 rounded"
|
||||
class="row justify-between items-center surface-1 q-px-md q-py-sm rounded surface-3 bordered"
|
||||
style="z-index: 1"
|
||||
>
|
||||
<q-tabs
|
||||
v-model="productAndServiceTab"
|
||||
class="full-height"
|
||||
style="border-top-left-radius: var(--radius-2)"
|
||||
>
|
||||
<q-tab
|
||||
name="all"
|
||||
@click="
|
||||
async () => {
|
||||
currentPageServiceAndProduct = 1;
|
||||
inputSearchProductAndService = '';
|
||||
currentStatus = 'All';
|
||||
pageSizeServiceAndProduct;
|
||||
// await fetchListOfProductAndService();
|
||||
flowStore.rotate();
|
||||
}
|
||||
"
|
||||
>
|
||||
<div
|
||||
class="row"
|
||||
:class="
|
||||
productAndServiceTab === 'all'
|
||||
? 'text-bold'
|
||||
: 'app-text-muted'
|
||||
"
|
||||
>
|
||||
{{ $t('all') }}
|
||||
<q-badge
|
||||
class="rounded q-ml-sm"
|
||||
:class="
|
||||
productAndServiceTab === 'all' ? '' : 'app-text-muted'
|
||||
"
|
||||
:color="productAndServiceTab === 'all' ? 'primary' : ''"
|
||||
style="background-color: var(--surface-3)"
|
||||
:label="totalProductAndService"
|
||||
/>
|
||||
</div>
|
||||
</q-tab>
|
||||
|
||||
<q-tab
|
||||
name="product"
|
||||
@click="
|
||||
async () => {
|
||||
currentPageServiceAndProduct = 1;
|
||||
inputSearchProductAndService = '';
|
||||
currentStatus = 'All';
|
||||
// await fetchListOfProduct();
|
||||
flowStore.rotate();
|
||||
}
|
||||
"
|
||||
>
|
||||
<div
|
||||
class="row"
|
||||
:class="
|
||||
productAndServiceTab === 'product'
|
||||
? 'text-bold'
|
||||
: 'app-text-muted'
|
||||
"
|
||||
>
|
||||
{{ $t('product') }}
|
||||
|
||||
<q-badge
|
||||
class="rounded q-ml-sm"
|
||||
:class="
|
||||
productAndServiceTab === 'product' ? '' : 'app-text-muted'
|
||||
"
|
||||
:color="productAndServiceTab === 'product' ? 'primary' : ''"
|
||||
style="background-color: var(--surface-3)"
|
||||
:label="totalProduct"
|
||||
/>
|
||||
</div>
|
||||
</q-tab>
|
||||
<q-tab
|
||||
name="service"
|
||||
@click="
|
||||
async () => {
|
||||
currentPageServiceAndProduct = 1;
|
||||
inputSearchProductAndService = '';
|
||||
currentStatus = 'All';
|
||||
// await fetchListOfService();
|
||||
flowStore.rotate();
|
||||
}
|
||||
"
|
||||
>
|
||||
<div
|
||||
class="row"
|
||||
:class="
|
||||
productAndServiceTab === 'service'
|
||||
? 'text-bold'
|
||||
: 'app-text-muted'
|
||||
"
|
||||
>
|
||||
{{ $t('service') }}
|
||||
<q-badge
|
||||
class="rounded q-ml-sm"
|
||||
:class="
|
||||
productAndServiceTab === 'service' ? '' : 'app-text-muted'
|
||||
"
|
||||
:color="productAndServiceTab === 'service' ? 'primary' : ''"
|
||||
style="background-color: var(--surface-3)"
|
||||
:label="totalService"
|
||||
/>
|
||||
</div>
|
||||
</q-tab>
|
||||
</q-tabs>
|
||||
|
||||
<div class="row q-py-sm q-pr-md">
|
||||
<div>
|
||||
<q-input
|
||||
style="width: 300px"
|
||||
outlined
|
||||
|
|
@ -1687,7 +1581,8 @@ watch(inputSearchProductAndService, async () => {
|
|||
<q-icon name="mdi-magnify" />
|
||||
</template>
|
||||
</q-input>
|
||||
|
||||
</div>
|
||||
<div class="row">
|
||||
<q-btn
|
||||
icon="mdi-tune-vertical-variant"
|
||||
size="sm"
|
||||
|
|
@ -1754,74 +1649,159 @@ watch(inputSearchProductAndService, async () => {
|
|||
</div>
|
||||
|
||||
<!-- tab -->
|
||||
|
||||
<div
|
||||
v-if="productAndService && productAndService.length > 0"
|
||||
class="row flex q-pa-md q-col-gutter-md col scroll"
|
||||
class="row flex col q-px-md"
|
||||
>
|
||||
<div
|
||||
class="col-md-3 col-sm-6 col-12"
|
||||
v-for="i in productAndServiceTab === 'all'
|
||||
? productAndService
|
||||
: productAndServiceTab === 'product'
|
||||
? product
|
||||
: service"
|
||||
:key="i.id"
|
||||
<q-tabs
|
||||
dense
|
||||
v-model="productAndServiceTab"
|
||||
class="col-12 q-mb-lg bordered-b"
|
||||
align="left"
|
||||
style="border-top-left-radius: var(--radius-2)"
|
||||
>
|
||||
<TotalProductCardComponent
|
||||
:data="i"
|
||||
:key="i.id"
|
||||
:title="i.name"
|
||||
:isDisabled="i.status === 'INACTIVE' ? true : false"
|
||||
@toggleStatus="
|
||||
() => {
|
||||
if (i.type === 'product') {
|
||||
toggleStatusProduct(i.id, i.status);
|
||||
}
|
||||
if (i.type === 'service') {
|
||||
toggleStatusService(i.id, i.status);
|
||||
}
|
||||
<q-tab
|
||||
name="all"
|
||||
@click="
|
||||
async () => {
|
||||
currentPageServiceAndProduct = 1;
|
||||
inputSearchProductAndService = '';
|
||||
currentStatus = 'All';
|
||||
pageSizeServiceAndProduct;
|
||||
// await fetchListOfProductAndService();
|
||||
flowStore.rotate();
|
||||
}
|
||||
"
|
||||
@menuViewDetail="
|
||||
async () => {
|
||||
if (i.type === 'product') {
|
||||
currentIdProduct = i.id;
|
||||
assignFormDataProduct(i);
|
||||
dialogProductEdit = true;
|
||||
}
|
||||
if (i.type === 'service') {
|
||||
currentIdService = i.id;
|
||||
infoServiceEdit = false;
|
||||
assignFormDataProductService(i.id);
|
||||
dialogServiceEdit = true;
|
||||
}
|
||||
await fetchListOfOptionBranch();
|
||||
}
|
||||
"
|
||||
@menuEdit="
|
||||
async () => {
|
||||
if (i.type === 'product') {
|
||||
currentIdProduct = i.id;
|
||||
infoProductEdit = true;
|
||||
assignFormDataProduct(i);
|
||||
dialogProductEdit = true;
|
||||
}
|
||||
if (i.type === 'service') {
|
||||
currentIdService = i.id;
|
||||
infoServiceEdit = true;
|
||||
assignFormDataProductService(i.id);
|
||||
dialogServiceEdit = true;
|
||||
}
|
||||
>
|
||||
<div
|
||||
class="row"
|
||||
:class="
|
||||
productAndServiceTab === 'all'
|
||||
? 'text-bold'
|
||||
: 'app-text-muted'
|
||||
"
|
||||
>
|
||||
{{ $t('all') }}
|
||||
</div>
|
||||
</q-tab>
|
||||
|
||||
await fetchListOfOptionBranch();
|
||||
<q-tab
|
||||
name="product"
|
||||
@click="
|
||||
async () => {
|
||||
currentPageServiceAndProduct = 1;
|
||||
inputSearchProductAndService = '';
|
||||
currentStatus = 'All';
|
||||
// await fetchListOfProduct();
|
||||
flowStore.rotate();
|
||||
}
|
||||
"
|
||||
/>
|
||||
>
|
||||
<div
|
||||
class="row"
|
||||
:class="
|
||||
productAndServiceTab === 'product'
|
||||
? 'text-bold'
|
||||
: 'app-text-muted'
|
||||
"
|
||||
>
|
||||
{{ $t('product') }}
|
||||
</div>
|
||||
</q-tab>
|
||||
<q-tab
|
||||
name="service"
|
||||
@click="
|
||||
async () => {
|
||||
currentPageServiceAndProduct = 1;
|
||||
inputSearchProductAndService = '';
|
||||
currentStatus = 'All';
|
||||
// await fetchListOfService();
|
||||
flowStore.rotate();
|
||||
}
|
||||
"
|
||||
>
|
||||
<div
|
||||
class="row"
|
||||
:class="
|
||||
productAndServiceTab === 'service'
|
||||
? 'text-bold'
|
||||
: 'app-text-muted'
|
||||
"
|
||||
>
|
||||
{{ $t('service') }}
|
||||
</div>
|
||||
</q-tab>
|
||||
</q-tabs>
|
||||
<div class="col-12 row flex col q-col-gutter-sm scroll full-height">
|
||||
<div
|
||||
class="col-md-3 col-sm-6 col-12"
|
||||
v-for="i in productAndServiceTab === 'all'
|
||||
? productAndService
|
||||
: productAndServiceTab === 'product'
|
||||
? product
|
||||
: service"
|
||||
:key="i.id"
|
||||
>
|
||||
<TotalProductCardComponent
|
||||
:data="i"
|
||||
:key="i.id"
|
||||
:title="i.name"
|
||||
:isDisabled="i.status === 'INACTIVE' ? true : false"
|
||||
@toggleStatus="
|
||||
() => {
|
||||
if (i.type === 'product') {
|
||||
toggleStatusProduct(i.id, i.status);
|
||||
}
|
||||
if (i.type === 'service') {
|
||||
toggleStatusService(i.id, i.status);
|
||||
}
|
||||
}
|
||||
"
|
||||
@menuViewDetail="
|
||||
async () => {
|
||||
if (i.type === 'product') {
|
||||
currentIdProduct = i.id;
|
||||
assignFormDataProduct(i);
|
||||
dialogProductEdit = true;
|
||||
}
|
||||
if (i.type === 'service') {
|
||||
currentIdService = i.id;
|
||||
infoServiceEdit = false;
|
||||
assignFormDataProductService(i.id);
|
||||
dialogServiceEdit = true;
|
||||
}
|
||||
await fetchListOfOptionBranch();
|
||||
}
|
||||
"
|
||||
@menuEdit="
|
||||
async () => {
|
||||
if (i.type === 'product') {
|
||||
currentIdProduct = i.id;
|
||||
infoProductEdit = true;
|
||||
assignFormDataProduct(i);
|
||||
dialogProductEdit = true;
|
||||
}
|
||||
if (i.type === 'service') {
|
||||
currentIdService = i.id;
|
||||
infoServiceEdit = true;
|
||||
assignFormDataProductService(i.id);
|
||||
dialogServiceEdit = true;
|
||||
}
|
||||
|
||||
await fetchListOfOptionBranch();
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- footer -->
|
||||
<div class="row items-center justify-between q-px-md">
|
||||
<div
|
||||
class="row items-center justify-between q-px-md surface-2"
|
||||
style="z-index: 99"
|
||||
>
|
||||
<div class="col-4">
|
||||
<div class="row items-center">
|
||||
<div class="app-text-muted" style="width: 80px">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue