refactor: edit layout

src/components/02_personnel-management/FormInformation.vue

@@ -15,6 +15,7 @@ const username = defineModel<string | null | undefined>('username');
 const userCode = defineModel<string>('userCode');
 
 defineProps<{
+  title?: string;
   dense?: boolean;
   outlined?: boolean;
   readonly?: boolean;
@@ -71,10 +72,20 @@ onMounted(async () => {
 });
 </script>
 <template>
-  <div class="col-md-3 col-12 app-text-muted">
+  <div class="row col-12">
-    • {{ $t('formDialogTitleInformation') }}
+    <div class="col-12 q-pb-sm text-weight-bold text-body1">
+      <q-icon
+        flat
+        size="xs"
+        class="q-pa-sm rounded q-mr-xs"
+        color="info"
+        name="mdi-office-building-outline"
+        style="background-color: var(--surface-3)"
+      />
+      {{ $t(`${title}`) }}
     </div>
-  <div class="col-md-9 col-12 row q-col-gutter-md">
+
+    <div class="col-12 row q-col-gutter-md">
       <q-select
         outlined
         clearable
@@ -90,7 +101,7 @@ onMounted(async () => {
         option-label="label"
         option-value="value"
         lazy-rules="ondemand"
-      class="col-md-4 col-6"
+        class="col-2"
         :dense="dense"
         :readonly="readonly"
         :hide-dropdown-icon="readonly"
@@ -123,7 +134,7 @@ onMounted(async () => {
         option-label="label"
         option-value="value"
         lazy-rules="ondemand"
-      class="col-md-4 col-6"
+        class="col-2"
         :dense="dense"
         :readonly="readonly"
         :hide-dropdown-icon="readonly"
@@ -149,7 +160,7 @@ onMounted(async () => {
         map-options
         options-dense
         hide-bottom-space
-      class="col-md-4 col-12"
+        class="col"
         :label="$t('formDialogInputUsername')"
         v-model="username"
         :rules="[
@@ -166,7 +177,7 @@ onMounted(async () => {
         map-options
         hide-selected
         hide-bottom-space
-      class="col-6"
+        class="col"
         v-model="userType"
         input-debounce="0"
         option-value="value"
@@ -178,7 +189,9 @@ onMounted(async () => {
         :hide-dropdown-icon="readonly"
         :label="$t('formDialogInputUserType')"
         :options="userTypeOptions"
-      :rules="[(val: string) => !!val || $t('formDialogInputUserTypeValidate')]"
+        :rules="[
+          (val: string) => !!val || $t('formDialogInputUserTypeValidate'),
+        ]"
         @filter="userTypeFilter"
       >
         <template v-slot:no-option>
@@ -198,7 +211,7 @@ onMounted(async () => {
         map-options
         hide-selected
         hide-bottom-space
-      class="col-6"
+        class="col"
         input-debounce="0"
         option-label="label"
         option-value="value"
@@ -208,9 +221,11 @@ onMounted(async () => {
         v-model="userRole"
         :readonly="readonly"
         :hide-dropdown-icon="readonly"
-      :label="$t('formDialogInputUserRole')"
+        :label="$t('formDialogPrefixName')"
         :options="roleOptions"
-      :rules="[(val: string) => !!val || $t('formDialogInputUserRoleValidate')]"
+        :rules="[
+          (val: string) => !!val || $t('formDialogInputPrefixNameValidate'),
+        ]"
         @filter="roleFilter"
       >
         <template v-slot:no-option>
@@ -233,9 +248,5 @@ onMounted(async () => {
       v-model="userCode"
     /> -->
     </div>
-  <q-separator
+  </div>
-    v-if="separator"
-    class="col-12 q-mb-md"
-    style="padding-block: 0.5px; margin-top: 32px"
-  />
 </template>