From 7d004e33d4aad9bfe42796d8b500c2520454afba Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Mon, 28 Nov 2022 22:20:18 +0800
Subject: [PATCH] fix: the issue that role edit form cannot be submitted in the
 permission tab (halo-dev/console#717)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### What type of PR is this?

/kind bug
/milestone 2.0-rc.2

#### What this PR does / why we need it:

修复在角色编辑时，如果在权限勾选界面，无法提交表单的问题。

#### Which issue(s) this PR fixes:

Fixes https://github.com/halo-dev/halo/issues/2778

#### Special notes for your reviewer:

测试方式：

1. 编辑任意角色或者新建角色。
2. 在编辑弹框中切换到权限勾选界面。
3. 点击提交按钮，观察是否能够正常提交。

#### Does this PR introduce a user-facing change?

```release-note
修复在 Console 端角色编辑时，如果在权限勾选界面，无法提交表单的问题。
```
---
 .../roles/components/RoleEditingModal.vue     | 133 ++++++++++--------
 1 file changed, 73 insertions(+), 60 deletions(-)

diff --git a/src/modules/system/roles/components/RoleEditingModal.vue b/src/modules/system/roles/components/RoleEditingModal.vue
index 00a76015f..22647f711 100644
--- a/src/modules/system/roles/components/RoleEditingModal.vue
+++ b/src/modules/system/roles/components/RoleEditingModal.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { VButton, VModal, VSpace, VTabItem, VTabs } from "@halo-dev/components";
+import { VButton, VModal, VSpace, VTabbar } from "@halo-dev/components";
 import SubmitButton from "@/components/button/SubmitButton.vue";
 import { computed, ref, watch } from "vue";
 import { rbacAnnotations } from "@/constants/annotations";
@@ -110,8 +110,22 @@ const handleResetForm = () => {
     :width="700"
     @update:visible="onVisibleChange"
   >
-    <VTabs v-model:active-id="tabActiveId" type="outline">
-      <VTabItem id="general" label="基础信息">
+    <VTabbar
+      v-model:active-id="tabActiveId"
+      :items="[
+        {
+          id: 'general',
+          label: '基本信息',
+        },
+        {
+          id: 'permissions',
+          label: '权限',
+        },
+      ]"
+      type="outline"
+    />
+    <div class="mt-2">
+      <div v-show="tabActiveId === 'general'">
         <FormKit
           v-if="formState.metadata.annotations"
           id="role-form"
@@ -131,66 +145,65 @@ const handleResetForm = () => {
             validation="required|length:0,50"
           ></FormKit>
         </FormKit>
-      </VTabItem>
-      <VTabItem id="permissions" label="权限">
-        <div>
-          <dl class="divide-y divide-gray-100">
-            <div
-              v-for="(group, groupIndex) in roleTemplateGroups"
-              :key="groupIndex"
-              class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
-            >
-              <dt class="text-sm font-medium text-gray-900">
-                {{ group.module }}
-              </dt>
-              <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
-                <ul class="space-y-2">
-                  <li v-for="(roleTemplate, index) in group.roles" :key="index">
-                    <label
-                      class="inline-flex w-full cursor-pointer flex-row items-center gap-4 rounded-base border p-5 hover:border-primary"
-                    >
-                      <input
-                        v-model="selectedRoleTemplates"
-                        :value="roleTemplate.metadata.name"
-                        class="h-4 w-4 rounded border-gray-300 text-indigo-600"
-                        type="checkbox"
-                        @change="handleRoleTemplateSelect"
-                      />
-                      <div class="flex flex-1 flex-col gap-y-3">
-                        <span class="font-medium text-gray-900">
-                          {{
-                            roleTemplate.metadata.annotations?.[
-                              rbacAnnotations.DISPLAY_NAME
-                            ]
-                          }}
-                        </span>
-                        <span
-                          v-if="
+      </div>
+
+      <div v-show="tabActiveId === 'permissions'">
+        <dl class="divide-y divide-gray-100">
+          <div
+            v-for="(group, groupIndex) in roleTemplateGroups"
+            :key="groupIndex"
+            class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
+          >
+            <dt class="text-sm font-medium text-gray-900">
+              {{ group.module }}
+            </dt>
+            <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
+              <ul class="space-y-2">
+                <li v-for="(roleTemplate, index) in group.roles" :key="index">
+                  <label
+                    class="inline-flex w-full cursor-pointer flex-row items-center gap-4 rounded-base border p-5 hover:border-primary"
+                  >
+                    <input
+                      v-model="selectedRoleTemplates"
+                      :value="roleTemplate.metadata.name"
+                      class="h-4 w-4 rounded border-gray-300 text-indigo-600"
+                      type="checkbox"
+                      @change="handleRoleTemplateSelect"
+                    />
+                    <div class="flex flex-1 flex-col gap-y-3">
+                      <span class="font-medium text-gray-900">
+                        {{
+                          roleTemplate.metadata.annotations?.[
+                            rbacAnnotations.DISPLAY_NAME
+                          ]
+                        }}
+                      </span>
+                      <span
+                        v-if="
+                          roleTemplate.metadata.annotations?.[
+                            rbacAnnotations.DEPENDENCIES
+                          ]
+                        "
+                        class="text-xs text-gray-400"
+                      >
+                        依赖于
+                        {{
+                          JSON.parse(
                             roleTemplate.metadata.annotations?.[
                               rbacAnnotations.DEPENDENCIES
                             ]
-                          "
-                          class="text-xs text-gray-400"
-                        >
-                          依赖于
-                          {{
-                            JSON.parse(
-                              roleTemplate.metadata.annotations?.[
-                                rbacAnnotations.DEPENDENCIES
-                              ]
-                            ).join(", ")
-                          }}
-                        </span>
-                      </div>
-                    </label>
-                  </li>
-                </ul>
-              </dd>
-            </div>
-          </dl>
-        </div>
-      </VTabItem>
-    </VTabs>
+                          ).join(", ")
+                        }}
+                      </span>
+                    </div>
+                  </label>
+                </li>
+              </ul>
+            </dd>
+          </div>
+        </dl>
+      </div>
+    </div>
     <template #footer>
       <VSpace>
         <SubmitButton