refactor: responsive (#180)
* refactor: can open one dropdown whe lt.md * style: update MainLayout background color and fix avatar border class name * feat: add touch position binding for dropdown in ProfileMenu * refactor: enhance icon styling in DrawerComponent * fix: update screen size conditions * feat: add responsive search and filter functionality in MainPage * feat: update styling and functionality in BasicInformation and MainPage components * feat: package view mode improve layout and responsiveness * feat: improve layout and responsiveness of ProfileBanner component * feat: enhance TreeView component with improved icon layout and cursor pointer styling * feat: update DialogForm component to prevent text wrapping in the center column * feat: enhance FormDocument, PriceDataComponent, and BasicInfoProduct components with layout and styling improvements * feat: enhance ProfileBanner dark tab * feat: 02 => responsive & responsibleArea type * fix: layout header bg condition & 02 filter col * feat: 04 flow => add AddButton component and enhance layout in FormFlow and FlowDialog * feat: 07 => enhance layout and responsiveness * refactor: simplify header structure and improve layout consistency * fix: improve text color in ItemCard and adjust responsive breakpoints in product service group * refactor: 05 => enhance layout responsiveness and improve class bindings in quotation components * refactor: enhance styling and improve props flexibility in dialog and select components * refactor: 05 => enhance layout responsiveness in quotation components * refactor: 05 => enhance layout responsiveness * refactor: 05 => formWorkerAdd * refactor: 05 => formWorkerAdd Product table * refactor: 05 => improve layout responsiveness and enhance component structure * refactor: enhance grid view handling and improve component imports * refactor: improve column classes for better layout consistency * refactor: 09 => enhance layout structure and improve responsiveness in task order views * refactor: 10 => enhance invoice main page layout and improve component interactions * refactor: 13 => enhance receipt main page layout and improve component interactions * refactor: 11 => enhance layout and improve responsiveness in credit note pages * refactor: 01 => screen.sm search & filter * refactor: 01 => improve layout responsiveness and fix variable naming in branch management forms --------- Co-authored-by: puriphatt <puriphat@frappet.com>
This commit is contained in:
Methapon Metanipat
GitHub
parent
79ec995547
commit
e0c1725001
45 changed files with 993 additions and 609 deletions
|
|
@ -3,7 +3,7 @@ import { nextTick, ref, watch, reactive } from 'vue';
|
|||
import { useI18n } from 'vue-i18n';
|
||||
import { onMounted } from 'vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useQuasar, type QTableProps } from 'quasar';
|
||||
import { QSelect, useQuasar, type QTableProps } from 'quasar';
|
||||
|
||||
import DialogProperties from 'src/components/dialog/DialogProperties.vue';
|
||||
import ProductCardComponent from 'components/04_product-service/ProductCardComponent.vue';
|
||||
|
|
@ -156,6 +156,12 @@ const priceDisplay = computed(() => ({
|
|||
const actionDisplay = computed(() =>
|
||||
isRoleInclude(['admin', 'head_of_admin', 'system', 'owner', 'accountant']),
|
||||
);
|
||||
const splitterModel = computed(() =>
|
||||
$q.screen.lt.md ? (productMode.value !== 'group' ? 0 : 100) : 25,
|
||||
);
|
||||
|
||||
const refFilterGroup = ref<InstanceType<typeof QSelect>>();
|
||||
const refFilterProductService = ref<InstanceType<typeof QSelect>>();
|
||||
const holdDialog = ref(false);
|
||||
const imageDialog = ref(false);
|
||||
const currentNode = ref<ProductGroup & { type: string }>();
|
||||
|
|
@ -205,7 +211,6 @@ const drawerInfo = ref(false);
|
|||
const isEdit = ref(false);
|
||||
|
||||
const modeView = ref(false);
|
||||
const splitterModel = ref(25);
|
||||
|
||||
const dialogInputForm = ref(false);
|
||||
const dialogProduct = ref(false);
|
||||
|
|
@ -1829,16 +1834,46 @@ watch(
|
|||
style="width: 100%"
|
||||
class="col"
|
||||
after-class="overflow-hidden"
|
||||
:disable="$q.screen.lt.sm"
|
||||
>
|
||||
<template v-slot:before>
|
||||
<div class="surface-1 column full-height">
|
||||
<div
|
||||
class="row no-wrap full-width bordered-b text-weight-bold surface-3 items-center q-px-md q-py-sm"
|
||||
:style="`min-height: ${$q.screen.gt.sm ? '57px' : '100.8px'}`"
|
||||
:style="`min-height: ${$q.screen.gt.sm ? '57px' : ''}`"
|
||||
>
|
||||
<div class="col ellipsis-2-lines">
|
||||
<div v-if="$q.screen.gt.sm" class="col ellipsis-2-lines">
|
||||
{{ $t('productService.caption') }}
|
||||
</div>
|
||||
<q-input
|
||||
v-else
|
||||
for="input-search"
|
||||
outlined
|
||||
dense
|
||||
:label="$t('general.search')"
|
||||
class="col"
|
||||
:bg-color="$q.dark.isActive ? 'dark' : 'white'"
|
||||
v-model="inputSearch"
|
||||
debounce="200"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="mdi-magnify" />
|
||||
</template>
|
||||
<template v-if="$q.screen.lt.md" v-slot:append>
|
||||
<span class="row">
|
||||
<q-separator vertical />
|
||||
<q-btn
|
||||
icon="mdi-filter-variant"
|
||||
unelevated
|
||||
class="q-ml-sm"
|
||||
padding="4px"
|
||||
size="sm"
|
||||
rounded
|
||||
@click="refFilterGroup?.showPopup"
|
||||
/>
|
||||
</span>
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
|
||||
<div class="col full-width scroll">
|
||||
|
|
@ -1964,10 +1999,9 @@ watch(
|
|||
<q-input
|
||||
for="input-search"
|
||||
outlined
|
||||
:class="{ 'col-12': $q.screen.lt.md }"
|
||||
dense
|
||||
:label="$t('general.search')"
|
||||
class=""
|
||||
class="col col-md-3"
|
||||
:bg-color="$q.dark.isActive ? 'dark' : 'white'"
|
||||
v-model="inputSearch"
|
||||
debounce="200"
|
||||
|
|
@ -1975,14 +2009,26 @@ watch(
|
|||
<template v-slot:prepend>
|
||||
<q-icon name="mdi-magnify" />
|
||||
</template>
|
||||
<template v-if="$q.screen.lt.md" v-slot:append>
|
||||
<span class="row">
|
||||
<q-separator vertical />
|
||||
<q-btn
|
||||
icon="mdi-filter-variant"
|
||||
unelevated
|
||||
class="q-ml-sm"
|
||||
padding="4px"
|
||||
size="sm"
|
||||
rounded
|
||||
@click="refFilterGroup?.showPopup"
|
||||
/>
|
||||
</span>
|
||||
</template>
|
||||
</q-input>
|
||||
|
||||
<div
|
||||
class="row col-12 col-md-6"
|
||||
:class="{ 'q-pt-xs': $q.screen.lt.md }"
|
||||
style="white-space: nowrap"
|
||||
>
|
||||
<div class="row col-md-6" style="white-space: nowrap">
|
||||
<q-select
|
||||
v-show="$q.screen.gt.sm"
|
||||
ref="refFilterGroup"
|
||||
v-model="currentStatus"
|
||||
for="select-status"
|
||||
outlined
|
||||
|
|
@ -2466,11 +2512,11 @@ watch(
|
|||
style="overflow: hidden"
|
||||
>
|
||||
<div
|
||||
class="row justify-between items-center q-px-md q-py-sm surface-3 bordered-b"
|
||||
class="row justify-between q-px-md q-py-sm surface-3 bordered-b"
|
||||
>
|
||||
<q-input
|
||||
for="input-search"
|
||||
:class="{ 'col-12': $q.screen.lt.md }"
|
||||
class="col col-md-3"
|
||||
outlined
|
||||
dense
|
||||
unelavated
|
||||
|
|
@ -2482,14 +2528,26 @@ watch(
|
|||
<template v-slot:prepend>
|
||||
<q-icon name="mdi-magnify" />
|
||||
</template>
|
||||
<template v-if="$q.screen.lt.md" v-slot:append>
|
||||
<span class="row">
|
||||
<q-separator vertical />
|
||||
<q-btn
|
||||
icon="mdi-filter-variant"
|
||||
unelevated
|
||||
class="q-ml-sm"
|
||||
padding="4px"
|
||||
size="sm"
|
||||
rounded
|
||||
@click="refFilterProductService?.showPopup"
|
||||
/>
|
||||
</span>
|
||||
</template>
|
||||
</q-input>
|
||||
|
||||
<div
|
||||
class="row col-12 col-md-6"
|
||||
:class="{ 'q-pt-xs': $q.screen.lt.md }"
|
||||
style="white-space: nowrap"
|
||||
>
|
||||
<div class="row col-md-6" style="white-space: nowrap">
|
||||
<q-select
|
||||
v-show="$q.screen.gt.sm"
|
||||
ref="refFilterProductService"
|
||||
:for="'field-select-status'"
|
||||
v-model="currentStatus"
|
||||
outlined
|
||||
|
|
@ -3721,86 +3779,93 @@ watch(
|
|||
</div>
|
||||
|
||||
<div
|
||||
class="col surface-1 rounded bordered scroll row relative-position"
|
||||
id="product-form"
|
||||
class="full-width full-height scroll"
|
||||
:class="{
|
||||
'q-mb-lg q-mx-lg ': $q.screen.gt.sm,
|
||||
'q-mb-sm q-mx-md': !$q.screen.gt.sm,
|
||||
'q-pb-lg q-px-lg ': $q.screen.gt.sm,
|
||||
'q-pb-sm q-px-md': !$q.screen.gt.sm,
|
||||
}"
|
||||
>
|
||||
<div
|
||||
class="col"
|
||||
style="height: 100%; max-height: 100; overflow-y: auto"
|
||||
v-if="$q.screen.gt.sm"
|
||||
>
|
||||
<div class="q-py-md q-pl-md q-pr-sm">
|
||||
<q-item
|
||||
v-for="v in 3"
|
||||
:key="v"
|
||||
dense
|
||||
clickable
|
||||
class="no-padding items-center rounded full-width"
|
||||
:class="{ 'q-mt-xs': v > 1 }"
|
||||
active-class="product-form-active"
|
||||
:active="productTab === v"
|
||||
@click="productTab = v"
|
||||
>
|
||||
<span class="full-width q-py-sm" style="padding-inline: 20px">
|
||||
{{
|
||||
v === 1
|
||||
? $t('form.field.basicInformation')
|
||||
: v === 2
|
||||
? $t('productService.product.priceInformation')
|
||||
: $t('general.information', {
|
||||
msg: $t('general.attachment'),
|
||||
})
|
||||
}}
|
||||
</span>
|
||||
</q-item>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="col-12 col-md-10"
|
||||
id="customer-form-content"
|
||||
:class="{
|
||||
'q-py-md q-pr-md ': $q.screen.gt.sm,
|
||||
'q-py-md q-px-lg': !$q.screen.gt.sm,
|
||||
}"
|
||||
style="height: 100%; max-height: 100%; overflow-y: auto"
|
||||
class="col surface-1 rounded bordered scroll row relative-position full-height"
|
||||
id="product-form"
|
||||
>
|
||||
<div
|
||||
class="q-py-md q-px-lg"
|
||||
style="position: absolute; z-index: 99999; top: 0; right: 0"
|
||||
class="col"
|
||||
style="height: 100%; max-height: 100; overflow-y: auto"
|
||||
v-if="$q.screen.gt.sm"
|
||||
>
|
||||
<div class="surface-1 row rounded">
|
||||
<SaveButton id="btn-info-basic-save" icon-only type="submit" />
|
||||
<div class="q-py-md q-pl-md q-pr-sm">
|
||||
<q-item
|
||||
v-for="v in 3"
|
||||
:key="v"
|
||||
dense
|
||||
clickable
|
||||
class="no-padding items-center rounded full-width"
|
||||
:class="{ 'q-mt-xs': v > 1 }"
|
||||
active-class="product-form-active"
|
||||
:active="productTab === v"
|
||||
@click="productTab = v"
|
||||
>
|
||||
<span class="full-width q-py-sm" style="padding-inline: 20px">
|
||||
{{
|
||||
v === 1
|
||||
? $t('form.field.basicInformation')
|
||||
: v === 2
|
||||
? $t('productService.product.priceInformation')
|
||||
: $t('general.information', {
|
||||
msg: $t('general.attachment'),
|
||||
})
|
||||
}}
|
||||
</span>
|
||||
</q-item>
|
||||
</div>
|
||||
</div>
|
||||
<BasicInfoProduct
|
||||
v-if="productTab === 1"
|
||||
v-model:detail="formProduct.detail"
|
||||
v-model:remark="formProduct.remark"
|
||||
v-model:name="formProduct.name"
|
||||
v-model:code="formProduct.code"
|
||||
v-model:process="formProduct.process"
|
||||
v-model:expense-type="formProduct.expenseType"
|
||||
v-model:shared="formProduct.shared"
|
||||
dense
|
||||
separator
|
||||
/>
|
||||
<PriceDataComponent
|
||||
v-if="productTab === 2"
|
||||
v-model:price="formProduct.price"
|
||||
v-model:agent-price="formProduct.agentPrice"
|
||||
v-model:service-charge="formProduct.serviceCharge"
|
||||
v-model:vat-included="formProduct.vatIncluded"
|
||||
v-model:calc-vat="formProduct.calcVat"
|
||||
dense
|
||||
/>
|
||||
<FormDocument
|
||||
v-if="productTab === 3"
|
||||
v-model:attachment="formProductDocument"
|
||||
/>
|
||||
<div
|
||||
class="col-12 col-md-10"
|
||||
id="customer-form-content"
|
||||
:class="{
|
||||
'q-py-md q-pr-md ': $q.screen.gt.sm,
|
||||
'q-pa-sm': !$q.screen.gt.sm,
|
||||
}"
|
||||
style="height: 100%; max-height: 100%; overflow-y: auto"
|
||||
>
|
||||
<div
|
||||
:class="{
|
||||
'q-my-md q-mx-lg': $q.screen.gt.sm,
|
||||
'q-ma-sm': $q.screen.lt.md,
|
||||
}"
|
||||
style="position: absolute; z-index: 99999; top: 0; right: 0"
|
||||
>
|
||||
<div class="surface-1 row rounded">
|
||||
<SaveButton id="btn-info-basic-save" icon-only type="submit" />
|
||||
</div>
|
||||
</div>
|
||||
<BasicInfoProduct
|
||||
v-if="productTab === 1"
|
||||
v-model:detail="formProduct.detail"
|
||||
v-model:remark="formProduct.remark"
|
||||
v-model:name="formProduct.name"
|
||||
v-model:code="formProduct.code"
|
||||
v-model:process="formProduct.process"
|
||||
v-model:expense-type="formProduct.expenseType"
|
||||
v-model:shared="formProduct.shared"
|
||||
dense
|
||||
separator
|
||||
/>
|
||||
<PriceDataComponent
|
||||
v-if="productTab === 2"
|
||||
v-model:price="formProduct.price"
|
||||
v-model:agent-price="formProduct.agentPrice"
|
||||
v-model:service-charge="formProduct.serviceCharge"
|
||||
v-model:vat-included="formProduct.vatIncluded"
|
||||
v-model:calc-vat="formProduct.calcVat"
|
||||
dense
|
||||
/>
|
||||
<FormDocument
|
||||
v-if="productTab === 3"
|
||||
v-model:attachment="formProductDocument"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DialogForm>
|
||||
|
|
@ -3887,123 +3952,131 @@ watch(
|
|||
</div>
|
||||
|
||||
<div
|
||||
class="col surface-1 rounded bordered scroll row relative-position"
|
||||
id="product-form"
|
||||
class="full-width full-height scroll"
|
||||
:class="{
|
||||
'q-mb-lg q-mx-lg ': $q.screen.gt.sm,
|
||||
'q-mb-sm q-mx-md': !$q.screen.gt.sm,
|
||||
'q-pb-lg q-px-lg ': $q.screen.gt.sm,
|
||||
'q-pb-sm q-px-md': !$q.screen.gt.sm,
|
||||
}"
|
||||
>
|
||||
<div
|
||||
class="surface-1 rounded row q-mx-lg q-my-md"
|
||||
style="position: absolute; z-index: 999; top: 0; right: 0"
|
||||
v-if="actionDisplay && !currentNoAction"
|
||||
class="col surface-1 rounded bordered scroll row relative-position full-height"
|
||||
id="product-form"
|
||||
>
|
||||
<UndoButton
|
||||
v-if="infoProductEdit"
|
||||
id="btn-info-basic-undo"
|
||||
icon-only
|
||||
@click="
|
||||
() => {
|
||||
formProduct = { ...prevProduct };
|
||||
if (prevProduct.document)
|
||||
formProductDocument = prevProduct.document;
|
||||
infoProductEdit = false;
|
||||
}
|
||||
"
|
||||
type="button"
|
||||
/>
|
||||
<SaveButton
|
||||
v-if="infoProductEdit"
|
||||
id="btn-info-basic-save"
|
||||
icon-only
|
||||
type="submit"
|
||||
/>
|
||||
<EditButton
|
||||
v-if="!infoProductEdit"
|
||||
id="btn-info-basic-edit"
|
||||
icon-only
|
||||
@click="infoProductEdit = true"
|
||||
type="button"
|
||||
/>
|
||||
<DeleteButton
|
||||
v-if="!infoProductEdit"
|
||||
id="btn-info-basic-delete"
|
||||
icon-only
|
||||
@click="() => deleteProductConfirm()"
|
||||
type="button"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="col"
|
||||
style="height: 100%; max-height: 100; overflow-y: auto"
|
||||
v-if="$q.screen.gt.sm"
|
||||
>
|
||||
<div class="q-py-md q-pl-md q-pr-sm">
|
||||
<q-item
|
||||
v-for="v in 3"
|
||||
:key="v"
|
||||
dense
|
||||
clickable
|
||||
class="no-padding items-center rounded full-width"
|
||||
:class="{ 'q-mt-xs': v > 1 }"
|
||||
active-class="product-form-active"
|
||||
:active="productTab === v"
|
||||
@click="productTab = v"
|
||||
>
|
||||
<span class="full-width q-py-sm" style="padding-inline: 20px">
|
||||
{{
|
||||
v === 1
|
||||
? $t('form.field.basicInformation')
|
||||
: v === 2
|
||||
? $t('productService.product.priceInformation')
|
||||
: $t('general.information', {
|
||||
msg: $t('general.attachment'),
|
||||
})
|
||||
}}
|
||||
</span>
|
||||
</q-item>
|
||||
<div
|
||||
class="surface-1 rounded row"
|
||||
:class="{
|
||||
'q-my-md q-mx-lg': $q.screen.gt.sm,
|
||||
'q-ma-sm': $q.screen.lt.md,
|
||||
}"
|
||||
style="position: absolute; z-index: 999; top: 0; right: 0"
|
||||
v-if="actionDisplay && !currentNoAction"
|
||||
>
|
||||
<UndoButton
|
||||
v-if="infoProductEdit"
|
||||
id="btn-info-basic-undo"
|
||||
icon-only
|
||||
@click="
|
||||
() => {
|
||||
formProduct = { ...prevProduct };
|
||||
if (prevProduct.document)
|
||||
formProductDocument = prevProduct.document;
|
||||
infoProductEdit = false;
|
||||
}
|
||||
"
|
||||
type="button"
|
||||
/>
|
||||
<SaveButton
|
||||
v-if="infoProductEdit"
|
||||
id="btn-info-basic-save"
|
||||
icon-only
|
||||
type="submit"
|
||||
/>
|
||||
<EditButton
|
||||
v-if="!infoProductEdit"
|
||||
id="btn-info-basic-edit"
|
||||
icon-only
|
||||
@click="infoProductEdit = true"
|
||||
type="button"
|
||||
/>
|
||||
<DeleteButton
|
||||
v-if="!infoProductEdit"
|
||||
id="btn-info-basic-delete"
|
||||
icon-only
|
||||
@click="() => deleteProductConfirm()"
|
||||
type="button"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="col"
|
||||
style="height: 100%; max-height: 100; overflow-y: auto"
|
||||
v-if="$q.screen.gt.sm"
|
||||
>
|
||||
<div class="q-py-md q-pl-md q-pr-sm">
|
||||
<q-item
|
||||
v-for="v in 3"
|
||||
:key="v"
|
||||
dense
|
||||
clickable
|
||||
class="no-padding items-center rounded full-width"
|
||||
:class="{ 'q-mt-xs': v > 1 }"
|
||||
active-class="product-form-active"
|
||||
:active="productTab === v"
|
||||
@click="productTab = v"
|
||||
>
|
||||
<span class="full-width q-py-sm" style="padding-inline: 20px">
|
||||
{{
|
||||
v === 1
|
||||
? $t('form.field.basicInformation')
|
||||
: v === 2
|
||||
? $t('productService.product.priceInformation')
|
||||
: $t('general.information', {
|
||||
msg: $t('general.attachment'),
|
||||
})
|
||||
}}
|
||||
</span>
|
||||
</q-item>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="col-12 col-md-10"
|
||||
:class="{
|
||||
'q-py-md q-pr-md ': $q.screen.gt.sm,
|
||||
'q-pa-sm': !$q.screen.gt.sm,
|
||||
}"
|
||||
id="customer-form-content"
|
||||
style="height: 100%; max-height: 100%; overflow-y: auto"
|
||||
>
|
||||
<BasicInfoProduct
|
||||
v-if="productTab === 1"
|
||||
:readonly="!infoProductEdit"
|
||||
v-model:detail="formProduct.detail"
|
||||
v-model:remark="formProduct.remark"
|
||||
v-model:name="formProduct.name"
|
||||
v-model:code="formProduct.code"
|
||||
v-model:process="formProduct.process"
|
||||
v-model:expense-type="formProduct.expenseType"
|
||||
v-model:shared="formProduct.shared"
|
||||
disableCode
|
||||
dense
|
||||
separator
|
||||
/>
|
||||
<PriceDataComponent
|
||||
v-if="productTab === 2"
|
||||
:readonly="!infoProductEdit"
|
||||
v-model:price="formProduct.price"
|
||||
v-model:agent-price="formProduct.agentPrice"
|
||||
v-model:service-charge="formProduct.serviceCharge"
|
||||
v-model:vat-included="formProduct.vatIncluded"
|
||||
v-model:calc-vat="formProduct.calcVat"
|
||||
dense
|
||||
:priceDisplay="priceDisplay"
|
||||
/>
|
||||
<FormDocument
|
||||
v-if="productTab === 3"
|
||||
:readonly="!infoProductEdit"
|
||||
v-model:attachment="formProductDocument"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="col-12 col-md-10"
|
||||
:class="{
|
||||
'q-py-md q-pr-md ': $q.screen.gt.sm,
|
||||
'q-py-md q-px-lg': !$q.screen.gt.sm,
|
||||
}"
|
||||
id="customer-form-content"
|
||||
style="height: 100%; max-height: 100%; overflow-y: auto"
|
||||
>
|
||||
<BasicInfoProduct
|
||||
v-if="productTab === 1"
|
||||
:readonly="!infoProductEdit"
|
||||
v-model:detail="formProduct.detail"
|
||||
v-model:remark="formProduct.remark"
|
||||
v-model:name="formProduct.name"
|
||||
v-model:code="formProduct.code"
|
||||
v-model:process="formProduct.process"
|
||||
v-model:expense-type="formProduct.expenseType"
|
||||
v-model:shared="formProduct.shared"
|
||||
disableCode
|
||||
dense
|
||||
separator
|
||||
/>
|
||||
<PriceDataComponent
|
||||
v-if="productTab === 2"
|
||||
:readonly="!infoProductEdit"
|
||||
v-model:price="formProduct.price"
|
||||
v-model:agent-price="formProduct.agentPrice"
|
||||
v-model:service-charge="formProduct.serviceCharge"
|
||||
v-model:vat-included="formProduct.vatIncluded"
|
||||
v-model:calc-vat="formProduct.calcVat"
|
||||
dense
|
||||
:priceDisplay="priceDisplay"
|
||||
/>
|
||||
<FormDocument
|
||||
v-if="productTab === 3"
|
||||
:readonly="!infoProductEdit"
|
||||
v-model:attachment="formProductDocument"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</DialogForm>
|
||||
|
|
@ -4170,17 +4243,33 @@ watch(
|
|||
id="customer-form-content"
|
||||
:class="{
|
||||
'q-py-md q-pr-md ': $q.screen.gt.sm,
|
||||
'q-py-md q-px-lg': !$q.screen.gt.sm,
|
||||
'q-pa-sm': !$q.screen.gt.sm,
|
||||
}"
|
||||
style="height: 100%; max-height: 100%; overflow-y: auto"
|
||||
>
|
||||
<div
|
||||
class="surface-1 rounded q-my-md q-mx-lg items-center row"
|
||||
style="position: absolute; z-index: 999; top: 0; right: 0"
|
||||
class="surface-1 rounded items-center justify-end row"
|
||||
:class="{
|
||||
'q-my-md q-mx-lg': $q.screen.gt.sm,
|
||||
'q-ma-sm': $q.screen.lt.md,
|
||||
}"
|
||||
style="
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
top: 0;
|
||||
right: 0;
|
||||
flex-wrap: wrap-reverse;
|
||||
"
|
||||
:style="$q.screen.lt.sm && 'width: 80px'"
|
||||
v-if="actionDisplay && !currentNoAction"
|
||||
>
|
||||
<div class="bordered rounded q-mr-md" v-if="serviceTab === 2">
|
||||
<div
|
||||
class="bordered rounded col-md row"
|
||||
v-if="serviceTab === 2"
|
||||
:style="$q.screen.lt.sm && 'flex-basis: 100%; '"
|
||||
>
|
||||
<q-btn
|
||||
class="col"
|
||||
icon="mdi-file-tree-outline"
|
||||
flat
|
||||
square
|
||||
|
|
@ -4199,6 +4288,7 @@ watch(
|
|||
@click="serviceTreeView = true"
|
||||
/>
|
||||
<q-btn
|
||||
class="col"
|
||||
icon="mdi-view-list-outline"
|
||||
flat
|
||||
square
|
||||
|
|
@ -4446,16 +4536,29 @@ watch(
|
|||
'q-mb-sm q-mx-md': !$q.screen.gt.sm,
|
||||
}"
|
||||
>
|
||||
<!-- row: $q.screen.gt.sm, -->
|
||||
<div
|
||||
class="surface-1 rounded q-my-md q-mx-lg row items-center"
|
||||
style="position: absolute; z-index: 999; top: 0; right: 0"
|
||||
class="surface-1 rounded items-center justify-end row"
|
||||
:class="{
|
||||
'q-my-md q-mx-lg': $q.screen.gt.sm,
|
||||
'q-ma-sm': $q.screen.lt.md,
|
||||
}"
|
||||
style="
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
top: 0;
|
||||
right: 0;
|
||||
flex-wrap: wrap-reverse;
|
||||
"
|
||||
v-if="actionDisplay && !currentNoAction"
|
||||
>
|
||||
<div
|
||||
class="bordered rounded q-mr-md"
|
||||
class="bordered rounded col-md row"
|
||||
v-if="serviceTab === 2 && !infoServiceEdit"
|
||||
:style="$q.screen.lt.sm && 'flex-basis: 100%; width: 1px'"
|
||||
>
|
||||
<q-btn
|
||||
class="col"
|
||||
icon="mdi-file-tree-outline"
|
||||
flat
|
||||
square
|
||||
|
|
@ -4474,6 +4577,7 @@ watch(
|
|||
@click="serviceTreeView = true"
|
||||
/>
|
||||
<q-btn
|
||||
class="col"
|
||||
icon="mdi-view-list-outline"
|
||||
flat
|
||||
square
|
||||
|
|
@ -4533,6 +4637,7 @@ watch(
|
|||
type="button"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="col column justify-between no-wrap"
|
||||
style="height: 100%; max-height: 100; overflow-y: auto"
|
||||
|
|
@ -4613,7 +4718,7 @@ watch(
|
|||
id="customer-form-content"
|
||||
:class="{
|
||||
'q-py-md q-pr-md ': $q.screen.gt.sm,
|
||||
'q-py-sm q-px-lg': !$q.screen.gt.sm,
|
||||
'q-pa-sm': !$q.screen.gt.sm,
|
||||
}"
|
||||
style="height: 100%; max-height: 100%; overflow-y: auto"
|
||||
v-if="dialogServiceEdit"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue