fix(02): table color and map role

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

@@ -224,7 +224,7 @@ onMounted(async () => {
         :label="$t('userRole')"
         :options="roleOptions"
         :rules="[
-          (val: string) => !!val || $t('formDialogInputPrefixNameValidate'),
+          (val: string) => !!val || $t('formDialogInputUserRoleValidate'),
         ]"
         @filter="roleFilter"
       >

src/pages/02_personnel-management/MainPage.vue

@@ -689,6 +689,13 @@ onMounted(async () => {
   flowStore.rotate();
 });
 
+function mapRole(value: string) {
+  const option = userStore.userOption.roleOpts.find(
+    (option) => option.value === value,
+  );
+  return option ? option.label : '-';
+}
+
 watch(
   () => selectorLabel.value,
   async (label) => {
@@ -1152,6 +1159,13 @@ watch(
                   'status-inactive': props.row.status === 'INACTIVE',
                 }"
                 :props="props"
+                :style="
+                  props.rowIndex % 2 !== 0
+                    ? $q.dark.isActive
+                      ? 'background: hsl(var(--gray-11-hsl)/0.2)'
+                      : `background: #f9fafc`
+                    : ''
+                "
               >
                 <q-td
                   class="text-center"
@@ -1262,7 +1276,7 @@ watch(
 
                 <q-td v-if="fieldSelected.includes('userRole')">
                   <span class="tags tags__purple">
-                    {{ props.row.userRole || '-' }}
+                    {{ mapRole(props.row.userRole) }}
                   </span>
                 </q-td>