fix: Style form view. (#452)

src/views/ADempiere/Form/index.vue

@@ -5,34 +5,50 @@
     class="view-base"
     style="height: 84vh;"
   >
-    <el-popover
-      v-if="!isEmptyValue(formMetadata.help)"
-      ref="helpTitle"
-      placement="top-start"
-      :title="formTitle"
-      width="400"
-      trigger="hover"
-    >
-      <div v-html="formMetadata.help" />
-    </el-popover>
-    <div class="w-33">
-      <div class="center">
-        <el-button
-          v-popover:helpTitle
-          type="text"
-          class="title text-center"
-        >
-          {{ formTitle }}
-        </el-button>
-      </div>
-    </div>
-    <form-panel
-      :metadata="{
-        ...formMetadata,
-        containerUuid: formUuid,
-        title: formTitle
-      }"
-    />
+    <el-header style="height: 39px;">
+      <context-menu
+        :menu-parent-uuid="$route.meta.parentUuid"
+        :container-uuid="formUuid"
+        :panel-type="panelType"
+      />
+    </el-header>
+    <el-main>
+      <el-row :gutter="20">
+        <el-col :span="24">
+          <el-card
+            class="content-collapse"
+            :style="isEmptyValue(formMetadata.fieldList) ? 'height: 75vh !important;' : ''"
+          >
+            <h3 class="warn-content text-center">
+              <el-popover
+                v-if="!isEmptyValue(formMetadata.help)"
+                ref="helpTitle"
+                placement="top-start"
+                :title="formTitle"
+                width="400"
+                trigger="hover"
+              >
+                <div v-html="formMetadata.help" />
+              </el-popover>
+              <el-button
+                v-popover:helpTitle
+                type="text"
+                class="title text-center"
+              >
+                {{ formTitle }}
+              </el-button>
+            </h3>
+            <form-panel
+              :metadata="{
+                ...formMetadata,
+                containerUuid: formUuid,
+                title: formTitle
+              }"
+            />
+          </el-card>
+        </el-col>
+      </el-row>
+    </el-main>
   </el-container>
   <div
     v-else
@@ -46,18 +62,21 @@
 </template>
 
 <script>
+import ContextMenu from '@/components/ADempiere/ContextMenu'
 import FormPanel from '@/components/ADempiere/Form'
 
 export default {
   name: 'FormView',
   components: {
+    ContextMenu,
     FormPanel
   },
   data() {
     return {
       formUuid: this.$route.meta.uuid,
       formMetadata: {},
-      isLoaded: false
+      isLoaded: false,
+      panelType: 'form'
     }
   },
   computed: {
@@ -94,7 +113,15 @@ export default {
 }
 </script>
 
-<style scoped>
+<style>
+  .el-card__body {
+    padding-top: 0px !important;
+    padding-right: 20px;
+    padding-bottom: 20px;
+    padding-left: 20px;
+  }
+</style>
+<style scoped >
   .view-base {
     height: 100%;
     min-height: calc(100vh - 84px);
@@ -105,18 +132,11 @@ export default {
     height: 100%;
   }
 
-  .custom-title {
-    color: #000000;
+  .title, .custom-title {
+    color: #000;
     text-size-adjust: 20px;
     font-size: 100%;
     font-weight: 605 !important;
-  }
-
-  .title {
-    color: #000000;
-    text-size-adjust: 20px;
-    font-size: 100%;
-    font-weight: 605!important;
     /* left: 50%; */
   }