feat: move button

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

@@ -27,7 +27,13 @@ import DialogForm from 'components/DialogForm.vue';
 import ProfileBanner from 'components/ProfileBanner.vue';
 import SideMenu from 'components/SideMenu.vue';
 import ImageUploadDialog from 'components/ImageUploadDialog.vue';
-import ToggleButton from 'src/components/button/ToggleButton.vue';
+import {
+  EditButton,
+  DeleteButton,
+  SaveButton,
+  UndoButton,
+  ToggleButton,
+} from 'components/button';
 
 import useFlowStore from 'stores/flow';
 import useMyBranchStore from 'stores/my-branch';
@@ -158,14 +164,14 @@ const treeProductTypeAndGroup = computed(() => {
         type: 'group',
         children:
           item.id === currentIdGrop.value
-            ? (recordTreeProductType.value[currentIdGrop.value]?.map((x) => ({
+            ? recordTreeProductType.value[currentIdGrop.value]?.map((x) => ({
                 ...x,
                 type: 'type',
-              })) ?? [])
-            : (recordTreeProductType.value[item.id]?.map((x) => ({
+              })) ?? []
+            : recordTreeProductType.value[item.id]?.map((x) => ({
                   ...x,
                   type: 'type',
-                })) ?? item._count.type > 0)
+                })) ?? item._count.type > 0
               ? [
                   {
                     id: '',
@@ -3556,8 +3562,6 @@ watch(
       )
     "
     :undo="() => undoProductGroup()"
-    :isEdit="isEdit"
-    :editData="() => (isEdit = true)"
     :submit="
       () => {
         if (editByTree !== undefined) {
@@ -3584,6 +3588,7 @@ watch(
         (drawerInfo = false), (currentIdGroupType = '');
       }
     "
+    hide-action
   >
     <InfoForm>
       <div class="q-mx-lg q-mt-lg">
@@ -3628,12 +3633,47 @@ watch(
         />
       </div>
 
-      <div
-        class="col surface-1 q-ma-lg rounded bordered scroll row"
-        id="group-info"
-      >
-        <div class="col">
-          <div style="position: sticky; top: 0" class="q-pa-sm">
+      <div class="col q-pa-lg">
+        <div
+          style="overflow-y: auto"
+          class="row full-width full-height surface-1 rounded relative-position"
+        >
+          <div
+            class="q-py-md q-px-lg"
+            style="position: absolute; z-index: 99999; top: 0; right: 0"
+          >
+            <div class="surface-1 row rounded">
+              <UndoButton
+                v-if="isEdit"
+                icon-only
+                @click="undoProductGroup()"
+                type="button"
+              />
+              <SaveButton
+                v-if="isEdit"
+                id="btn-info-basic-save"
+                icon-only
+                type="submit"
+              />
+              <EditButton
+                v-if="!isEdit"
+                id="btn-info-basic-edit"
+                icon-only
+                @click="isEdit = true"
+                type="button"
+              />
+              <DeleteButton
+                v-if="!isEdit"
+                id="btn-info-basic-delete"
+                icon-only
+                @click="deleteProductById()"
+                type="button"
+              />
+            </div>
+          </div>
+          <div
+            class="col full-height rounded scroll row q-py-md q-pl-md q-pr-sm"
+          >
             <SideMenu
               :menu="[
                 {
@@ -3649,19 +3689,22 @@ watch(
               scroll-element="#group-info"
             />
           </div>
-        </div>
-
-        <div class="col-10 q-pa-md q-gutter-y-xl">
-          <BasicInformation
-            id="info-group"
-            dense
-            :isType="productMode === 'type'"
-            :readonly="!isEdit"
-            v-model:remark="formDataGroup.remark"
-            v-model:name="formDataGroup.name"
-            v-model:code="formDataGroup.code"
-            v-model:detail="formDataGroup.detail"
-          />
+          <div
+            class="col-12 col-md-10 q-py-md q-pr-md q-pl-sm full-height"
+            id="group-info"
+            style="overflow-y: auto"
+          >
+            <BasicInformation
+              id="info-group"
+              dense
+              :isType="productMode === 'type'"
+              :readonly="!isEdit"
+              v-model:remark="formDataGroup.remark"
+              v-model:name="formDataGroup.name"
+              v-model:code="formDataGroup.code"
+              v-model:detail="formDataGroup.detail"
+            />
+          </div>
         </div>
       </div>
     </InfoForm>