refactor: product create
This commit is contained in:
puriphatt
parent
676c2c5ebf
commit
5e4cfb747d
8 changed files with 325 additions and 217 deletions
|
|
@ -217,6 +217,7 @@ const dialogProductServiceType = ref(false);
|
|||
const dialogTotalProduct = ref(false);
|
||||
const productMode = ref<'group' | 'type' | 'service' | 'product'>('group');
|
||||
|
||||
const productTab = ref(1);
|
||||
const productGroup = ref<ProductGroup[]>();
|
||||
const productType = ref<ProductGroup[]>();
|
||||
const product = ref<(ProductList & { type: 'product' })[]>();
|
||||
|
|
@ -1414,6 +1415,7 @@ watch(
|
|||
icon="mdi-folder-multiple-plus"
|
||||
@click="
|
||||
async () => {
|
||||
productTab = 1;
|
||||
clearFormProduct();
|
||||
await fetchListOfOptionBranch();
|
||||
dialogProduct = true;
|
||||
|
|
@ -2089,6 +2091,13 @@ watch(
|
|||
|
||||
<template v-slot:body="props">
|
||||
<q-tr
|
||||
:style="
|
||||
props.rowIndex % 2 !== 0
|
||||
? $q.dark.isActive
|
||||
? 'background: hsl(var(--gray-11-hsl)/0.2)'
|
||||
: `background: #f9fafc`
|
||||
: ''
|
||||
"
|
||||
:id="`enter-${props.row.name}`"
|
||||
class="cursor-pointer"
|
||||
:class="{
|
||||
|
|
@ -2342,6 +2351,7 @@ watch(
|
|||
<q-item-section class="q-py-sm">
|
||||
<div class="q-pa-sm surface-2 rounded">
|
||||
<q-toggle
|
||||
color="positive"
|
||||
:id="`view-detail-btn-${props.row.name}-status`"
|
||||
dense
|
||||
size="sm"
|
||||
|
|
@ -3162,6 +3172,7 @@ watch(
|
|||
<q-item-section class="q-py-sm">
|
||||
<div class="q-pa-sm surface-2 rounded">
|
||||
<q-toggle
|
||||
color="positive"
|
||||
:id="`view-detail-btn-${props.row.name}-status`"
|
||||
dense
|
||||
size="sm"
|
||||
|
|
@ -3334,9 +3345,13 @@ watch(
|
|||
>
|
||||
<div class="q-mx-lg q-mt-lg">
|
||||
<ProfileBanner
|
||||
readonly
|
||||
noImageAction
|
||||
active
|
||||
hideFade
|
||||
hideActive
|
||||
useToggle
|
||||
:toggleTitle="$t('formDialogTitleUseStatus')"
|
||||
:icon="productMode === 'group' ? 'mdi-folder' : 'mdi-folder-table'"
|
||||
:title="formDataGroup.name"
|
||||
:caption="formDataGroup.code"
|
||||
|
|
@ -3363,7 +3378,6 @@ watch(
|
|||
: '--violet-11'
|
||||
}-hsl)/0.1)`"
|
||||
v-model:toggle-status="currentStatusGroupType"
|
||||
@view="imageDialog = true"
|
||||
@update:toggle-status="
|
||||
() => {
|
||||
currentStatusGroupType =
|
||||
|
|
@ -3466,6 +3480,7 @@ watch(
|
|||
<InfoForm>
|
||||
<div class="q-mx-lg q-mt-lg">
|
||||
<ProfileBanner
|
||||
noImageAction
|
||||
:active="currentStatusGroupType !== 'INACTIVE'"
|
||||
hideFade
|
||||
useToggle
|
||||
|
|
@ -3497,7 +3512,6 @@ watch(
|
|||
bgColor: 'var(--surface-1)',
|
||||
},
|
||||
]"
|
||||
@view="imageDialog = true"
|
||||
@update:toggle-status="
|
||||
async (v) => {
|
||||
await triggerChangeStatus(currentIdGroupType, v, productMode);
|
||||
|
|
@ -3693,9 +3707,8 @@ watch(
|
|||
</FormDialog>
|
||||
|
||||
<!-- Add Product -->
|
||||
<FormDialog
|
||||
<DialogForm
|
||||
v-model:modal="dialogProduct"
|
||||
noAddress
|
||||
:title="$t('buttonAddProduct')"
|
||||
:submit="
|
||||
() => {
|
||||
|
|
@ -3709,8 +3722,7 @@ watch(
|
|||
}
|
||||
"
|
||||
>
|
||||
<template #prepend>
|
||||
<ProfileUpload
|
||||
<!-- <ProfileUpload
|
||||
prefix-id="form-dialog-product"
|
||||
isProduct
|
||||
v-model:url-profile="profileUrl"
|
||||
|
|
@ -3718,31 +3730,84 @@ watch(
|
|||
v-model:profile-submit="profileSubmit"
|
||||
@input-file="inputFile.click()"
|
||||
@cancel-file="inputFile.value = ''"
|
||||
/> -->
|
||||
<div class="q-mx-lg q-mt-lg">
|
||||
<ProfileBanner
|
||||
hideFade
|
||||
useToggle
|
||||
hideActive
|
||||
:toggleTitle="$t('formDialogTitleUseStatus')"
|
||||
img="/images/product-avatar.png"
|
||||
fallbackCover="/images/product-banner.png"
|
||||
bgColor="#ebf1ee"
|
||||
:menu="[
|
||||
{
|
||||
icon: 'mdi-office-building-outline',
|
||||
color: 'hsl(var(--info-bg))',
|
||||
bgColor: 'var(--surface-1)',
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<template #information>
|
||||
<BasicInfoProduct
|
||||
v-model:options-branch="branchOption"
|
||||
v-model:registered-branch-id="formDataProduct.registeredBranchId"
|
||||
v-model:detail="formDataProduct.detail"
|
||||
v-model:remark="formDataProduct.remark"
|
||||
v-model:name="formDataProduct.name"
|
||||
v-model:code="formDataProduct.code"
|
||||
v-model:process="formDataProduct.process"
|
||||
dense
|
||||
separator
|
||||
/>
|
||||
</template>
|
||||
<template #person>
|
||||
<PriceDataComponent
|
||||
v-model:price="formDataProduct.price"
|
||||
v-model:agent-price="formDataProduct.agentPrice"
|
||||
v-model:service-charge="formDataProduct.serviceCharge"
|
||||
dense
|
||||
/>
|
||||
</template>
|
||||
</FormDialog>
|
||||
<div
|
||||
class="col surface-1 q-ma-lg rounded bordered scroll row relative-position"
|
||||
id="group-form"
|
||||
>
|
||||
<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 2"
|
||||
: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 === 0
|
||||
? $t('formDialogTitleInformation')
|
||||
: $t('priceInformation')
|
||||
}}
|
||||
</span>
|
||||
</q-item>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="col-12 col-md-10 q-py-md q-pr-md q-pl-sm"
|
||||
id="customer-form-content"
|
||||
style="height: 100%; max-height: 100%; overflow-y: auto"
|
||||
>
|
||||
<BasicInfoProduct
|
||||
v-if="productTab === 1"
|
||||
v-model:options-branch="branchOption"
|
||||
v-model:registered-branch-id="formDataProduct.registeredBranchId"
|
||||
v-model:detail="formDataProduct.detail"
|
||||
v-model:remark="formDataProduct.remark"
|
||||
v-model:name="formDataProduct.name"
|
||||
v-model:code="formDataProduct.code"
|
||||
v-model:process="formDataProduct.process"
|
||||
dense
|
||||
separator
|
||||
/>
|
||||
<PriceDataComponent
|
||||
v-if="productTab === 2"
|
||||
v-model:price="formDataProduct.price"
|
||||
v-model:agent-price="formDataProduct.agentPrice"
|
||||
v-model:service-charge="formDataProduct.serviceCharge"
|
||||
dense
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</DialogForm>
|
||||
|
||||
<!-- edit product -->
|
||||
<FormDialog
|
||||
|
|
@ -4184,6 +4249,7 @@ watch(
|
|||
<q-item clickable v-ripple>
|
||||
<q-item-section avatar>
|
||||
<q-toggle
|
||||
color="positive"
|
||||
dense
|
||||
:id="`view-detail-btn-${currentNode.name}-status`"
|
||||
size="sm"
|
||||
|
|
@ -4354,4 +4420,10 @@ watch(
|
|||
* :deep(.q-icon.mdi-play) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.product-form-active {
|
||||
background-color: hsla(var(--info-bg) / 0.2);
|
||||
color: hsl(var(--info-bg));
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue