fix: product form

src/components/04_product-service/PriceDataComponent.vue

@@ -13,42 +13,40 @@ defineProps<{
 </script>
 
 <template>
-  <div class="row">
+  <div class="col-3 app-text-muted">• {{ $t('priceeInformation') }}</div>
-    <div class="col-4 app-text-muted">• {{ $t('priceeInformation') }}</div>
+  <div class="col-9 row q-col-gutter-md">
-    <div class="col-8 row q-col-gutter-md">
+    <q-input
-      <q-input
+      :dense="dense"
-        :dense="dense"
+      :outlined="!readonly"
-        :outlined="!readonly"
+      :readonly="readonly"
-        :readonly="readonly"
+      :borderless="readonly"
-        :borderless="readonly"
+      hide-bottom-space
-        hide-bottom-space
+      class="col-4"
-        class="col-4"
+      :label="$t('salePrice')"
-        :label="$t('salePrice')"
+      v-model="price"
-        v-model="price"
+    />
-      />
 
-      <q-input
+    <q-input
-        :dense="dense"
+      :dense="dense"
-        :outlined="!readonly"
+      :outlined="!readonly"
-        :readonly="readonly"
+      :readonly="readonly"
-        :borderless="readonly"
+      :borderless="readonly"
-        hide-bottom-space
+      hide-bottom-space
-        class="col-4"
+      class="col-4"
-        :label="$t('agentPrice')"
+      :label="$t('agentPrice')"
-        v-model="agentPrice"
+      v-model="agentPrice"
-      />
+    />
 
-      <q-input
+    <q-input
-        :dense="dense"
+      :dense="dense"
-        :outlined="!readonly"
+      :outlined="!readonly"
-        :readonly="readonly"
+      :readonly="readonly"
-        :borderless="readonly"
+      :borderless="readonly"
-        hide-bottom-space
+      hide-bottom-space
-        class="col-4"
+      class="col-4"
-        :label="$t('processingPrice')"
+      :label="$t('processingPrice')"
-        v-model="serviceCharge"
+      v-model="serviceCharge"
-      />
+    />
-    </div>
   </div>
 </template>
 

src/pages/04_product-service/MainPage.vue

@@ -1371,7 +1371,6 @@ watch(currentStatus, async () => {
   <FormDialog
     v-model:modal="dialogProduct"
     noAddress
-    noAppBox
     :title="$t('buttonAddProduct')"
     :submit="
       () => {
@@ -1391,11 +1390,10 @@ watch(currentStatus, async () => {
         v-model:status-toggle="statusToggle"
         v-model:profile-submit="profileSubmit"
         @input-file="inputFile.click()"
-        :hide-toggle="false"
       />
     </template>
 
-    <AppBox class="col-10" bordered>
+    <template #information>
       <BasicInfoProduct
         v-model:detail="formDataProduct.detail"
         v-model:remark="formDataProduct.remark"
@@ -1405,13 +1403,15 @@ watch(currentStatus, async () => {
         dense
         separator
       />
+    </template>
+    <template #person>
       <PriceDataComponent
         v-model:price="formDataProduct.price"
         v-model:agent-price="formDataProduct.agentPrice"
         v-model:service-charge="formDataProduct.serviceCharge"
         dense
       />
-    </AppBox>
+    </template>
   </FormDialog>
 
   <!-- edit product -->
@@ -1420,7 +1420,6 @@ watch(currentStatus, async () => {
     :isEdit="infoProductEdit"
     v-model:modal="dialogProductEdit"
     noAddress
-    noAppBox
     :title="$t('editProduct')"
     :editData="() => (infoProductEdit = true)"
     :undo="() => (infoProductEdit = false)"
@@ -1448,25 +1447,10 @@ watch(currentStatus, async () => {
         v-model:profile-submit="profileSubmit"
         @input-file="inputFile.click()"
         :label-status-toggle="'formDialogTitleProductStatus'"
-        :hide-toggle="false"
       />
-
-      <div class="text-left q-pt-md" v-if="infoProductEdit">
-        <q-toggle
-          id="toggle-status"
-          dense
-          size="md"
-          v-model="statusToggle"
-          padding="none"
-          class="q-pr-md"
-        />
-        <span>
-          {{ statusToggle ? $t('switchOnLabel') : $t('switchOffLabel') }}
-        </span>
-      </div>
     </template>
 
-    <AppBox class="col-10" bordered>
+    <template #information>
       <BasicInfoProduct
         :readonly="!infoProductEdit"
         v-model:detail="formDataProduct.detail"
@@ -1477,6 +1461,8 @@ watch(currentStatus, async () => {
         dense
         separator
       />
+    </template>
+    <template #person>
       <PriceDataComponent
         :readonly="!infoProductEdit"
         v-model:price="formDataProduct.price"
@@ -1484,13 +1470,13 @@ watch(currentStatus, async () => {
         v-model:service-charge="formDataProduct.serviceCharge"
         dense
       />
-    </AppBox>
+    </template>
   </FormDialog>
 
   <!-- add service -->
   <FormDialog
-    height="95vh"
     no-address
+    height="95vh"
     :title="$t('addService')"
     v-model:modal="dialogService"
     v-model:tabs-list="serviceTab"
@@ -1590,7 +1576,6 @@ watch(currentStatus, async () => {
   <FormDialog
     no-address
     no-app-box
-    no-footer
     width="65%"
     title="จัดการ"
     v-model:modal="manageWorkNameDialog"