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
|
<div
|
||||||
bordered
|
bordered
|
||||||
:class="{ 'is-add-product': isAddProduct }"
|
: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"
|
style="height: 20rem"
|
||||||
@click="$emit('select', data)"
|
@click="$emit('select', data)"
|
||||||
>
|
>
|
||||||
|
|
|
||||||
|
|
@ -1559,119 +1559,13 @@ watch(inputSearchProductAndService, async () => {
|
||||||
<!-- product/service -->
|
<!-- product/service -->
|
||||||
<div
|
<div
|
||||||
v-else-if="productMode === 'service'"
|
v-else-if="productMode === 'service'"
|
||||||
class="surface-1 col bordered rounded column"
|
class="surface-2 col bordered rounded column"
|
||||||
>
|
>
|
||||||
<div
|
<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"
|
style="z-index: 1"
|
||||||
>
|
>
|
||||||
<q-tabs
|
<div>
|
||||||
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">
|
|
||||||
<q-input
|
<q-input
|
||||||
style="width: 300px"
|
style="width: 300px"
|
||||||
outlined
|
outlined
|
||||||
|
|
@ -1687,7 +1581,8 @@ watch(inputSearchProductAndService, async () => {
|
||||||
<q-icon name="mdi-magnify" />
|
<q-icon name="mdi-magnify" />
|
||||||
</template>
|
</template>
|
||||||
</q-input>
|
</q-input>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
<q-btn
|
<q-btn
|
||||||
icon="mdi-tune-vertical-variant"
|
icon="mdi-tune-vertical-variant"
|
||||||
size="sm"
|
size="sm"
|
||||||
|
|
@ -1754,74 +1649,159 @@ watch(inputSearchProductAndService, async () => {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- tab -->
|
<!-- tab -->
|
||||||
|
|
||||||
<div
|
<div
|
||||||
v-if="productAndService && productAndService.length > 0"
|
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
|
<q-tabs
|
||||||
class="col-md-3 col-sm-6 col-12"
|
dense
|
||||||
v-for="i in productAndServiceTab === 'all'
|
v-model="productAndServiceTab"
|
||||||
? productAndService
|
class="col-12 q-mb-lg bordered-b"
|
||||||
: productAndServiceTab === 'product'
|
align="left"
|
||||||
? product
|
style="border-top-left-radius: var(--radius-2)"
|
||||||
: service"
|
|
||||||
:key="i.id"
|
|
||||||
>
|
>
|
||||||
<TotalProductCardComponent
|
<q-tab
|
||||||
:data="i"
|
name="all"
|
||||||
:key="i.id"
|
@click="
|
||||||
:title="i.name"
|
async () => {
|
||||||
:isDisabled="i.status === 'INACTIVE' ? true : false"
|
currentPageServiceAndProduct = 1;
|
||||||
@toggleStatus="
|
inputSearchProductAndService = '';
|
||||||
() => {
|
currentStatus = 'All';
|
||||||
if (i.type === 'product') {
|
pageSizeServiceAndProduct;
|
||||||
toggleStatusProduct(i.id, i.status);
|
// await fetchListOfProductAndService();
|
||||||
}
|
flowStore.rotate();
|
||||||
if (i.type === 'service') {
|
|
||||||
toggleStatusService(i.id, i.status);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
"
|
"
|
||||||
@menuViewDetail="
|
>
|
||||||
async () => {
|
<div
|
||||||
if (i.type === 'product') {
|
class="row"
|
||||||
currentIdProduct = i.id;
|
:class="
|
||||||
assignFormDataProduct(i);
|
productAndServiceTab === 'all'
|
||||||
dialogProductEdit = true;
|
? 'text-bold'
|
||||||
}
|
: 'app-text-muted'
|
||||||
if (i.type === 'service') {
|
"
|
||||||
currentIdService = i.id;
|
>
|
||||||
infoServiceEdit = false;
|
{{ $t('all') }}
|
||||||
assignFormDataProductService(i.id);
|
</div>
|
||||||
dialogServiceEdit = true;
|
</q-tab>
|
||||||
}
|
|
||||||
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();
|
<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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- footer -->
|
<!-- 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="col-4">
|
||||||
<div class="row items-center">
|
<div class="row items-center">
|
||||||
<div class="app-text-muted" style="width: 80px">
|
<div class="app-text-muted" style="width: 80px">
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue