refactor: 重构角色管理

src/modules/base/roles/components/UserInfo.vue

 <script setup lang="ts">
-import type { Info } from '../types'
+import type { RoleInfo, RoleMember } from '../types'
 
-const emit = defineEmits<{
-  (e: 'update:modelValue', visible: boolean): void
-}>()
-
-const prop = defineProps<{
-  data: Info
-}>()
+defineProps<{ data: RoleMember; role: RoleInfo }>()
 </script>
 
 <template>
-  <el-dialog class="dialogClass" title="用户信息" width="500px" :close-on-click-modal="false">
-    <div class="info">
-      <div class="item">
-        <div class="label">姓名：</div>
-        <div class="value">{{ prop.data.user_name }}</div>
-      </div>
-      <div class="item">
-        <div class="label">用户手机：</div>
-        <div class="value">{{ prop.data.mobile }}</div>
-      </div>
-      <div class="item">
-        <div class="label">用户邮箱：</div>
-        <div class="value">{{ prop.data.email }}</div>
-      </div>
-      <div class="item">
-        <div class="label">角色类型：</div>
-        <div class="value" v-if="Array.isArray(prop.data.levels)">
-          <el-tag class="ml-2" v-for="(item, index) in prop.data.levels" :key="index">{{ item }}</el-tag>
-        </div>
-        <div class="value" v-else>{{ prop.data.levels }}</div>
-      </div>
-      <div class="item">
-        <div class="label">角色名称：</div>
-        <div class="value">
-          <el-tag>{{ prop.data.name }}</el-tag>
-        </div>
-      </div>
-      <div class="item">
-        <div class="label">应用项目：</div>
-        <div class="value" v-if="Array.isArray(prop.data.projects)">
-          <el-tag class="ml-2" v-for="(item, index) in prop.data.projects" :key="index">{{ item }}</el-tag>
-        </div>
-        <div class="value" v-else>{{ prop.data.projects }}</div>
-      </div>
-      <div class="item">
-        <div class="label">应用渠道：</div>
-        <div class="value" v-if="Array.isArray(prop.data.channels)">
-          <el-tag class="ml-2" v-for="(item, index) in prop.data.channels" :key="index">{{ item }}</el-tag>
-        </div>
-        <div class="value" v-else>{{ prop.data.channels }}</div>
-      </div>
-    </div>
+  <el-dialog class="dialogClass" title="用户信息" width="800px">
+    <el-form label-width="100px" label-suffix="：">
+      <el-row justify="space-between">
+        <el-form-item label="姓名">{{ data.user_name }}</el-form-item>
+        <el-form-item label="用户手机">{{ data.mobile }}</el-form-item>
+        <el-form-item label="用户邮箱">{{ data.email }}</el-form-item>
+      </el-row>
+      <el-form-item label="角色类型">
+        <el-tag v-for="(item, index) in role.levels" :key="index" size="large">{{ item }}</el-tag>
+      </el-form-item>
+      <el-form-item label="角色名称">
+        <el-tag size="large">{{ role.name }}</el-tag>
+      </el-form-item>
+      <el-form-item label="应用项目">
+        <el-tag v-for="(item, index) in data.projects" :key="index" size="large">{{ item }}</el-tag>
+      </el-form-item>
+      <el-form-item label="应用渠道">
+        <el-tag v-for="(item, index) in data.channels" :key="index" size="large">{{ item }}</el-tag>
+      </el-form-item>
+    </el-form>
     <template #footer>
-      <span class="dialog-footer">
-        <el-button @click="emit('update:modelValue', false)">关闭</el-button>
-      </span>
+      <el-button @click="$emit('update:modelValue', false)" auto-insert-space>关闭</el-button>
     </template>
   </el-dialog>
 </template>
-<style lang="scss">
-.dialogClass {
-  .el-dialog__body {
-    padding: 10px 20px 20px;
-  }
-  .info {
-    .item {
-      display: flex;
-      .label {
-        width: 110px;
-        display: inline-flex;
-        justify-content: flex-end;
-        align-items: flex-start;
-        flex: 0 0 auto;
-        font-size: 14px;
-        color: #969696;
-        height: 32px;
-        line-height: 32px;
-        box-sizing: border-box;
-        text-align: right;
-      }
-      .value {
-        font-size: 14px;
-        line-height: 32px;
-        .el-tag {
-          margin-top: 5px;
-        }
-        .ml-2 {
-          margin-right: 10px;
-        }
-      }
-    }
-  }
+<style lang="scss" scoped>
+.el-tag {
+  margin-bottom: 10px;
+  margin-right: 10px;
 }
 </style>

src/modules/base/roles/types.ts

@@ -6,4 +6,27 @@ export interface Info {
   levels: string | string[]
   projects: string | string[]
   channels: string | string[]
-}
+}
\ No newline at end of file
+
+// 角色信息
+export interface RoleInfo {
+  id: string
+  name: string
+  desc: string
+  user_count: number
+  created_at: string
+  updated_at: string
+  levels: string[]
+  members: RoleMember[]
+}
+
+// 角色成员
+export interface RoleMember {
+  user_id: string
+  user_name: string
+  mobile: string
+  email: string
+  join_time: string
+  projects: string[]
+  channels: string[]
+}

src/modules/base/roles/views/Details.vue

 <script setup lang="ts">
 import AppList from '@/components/base/AppList.vue'
 import { getManagementDetail } from '../api'
-import type { Info } from '../types'
+import type { RoleInfo, RoleMember } from '../types'
 
 const route = useRoute()
 
@@ -9,17 +9,15 @@ const UserInfo = defineAsyncComponent(() => import('../components/UserInfo.vue')
 
 const appList = $ref<InstanceType<typeof AppList> | null>(null)
 
-let userInfoData: any = $ref()
+let roleInfo = $ref<RoleInfo>()
 
 const listOptions = $computed(() => {
   return {
     remote: {
       httpRequest: getManagementDetail,
-      params: {
-        role_id: route.params.id
-      },
-      callback: (res: any) => {
-        userInfoData = res
+      params: { role_id: route.params.id },
+      callback: (res: RoleInfo) => {
+        roleInfo = res
         return { list: res.members }
       }
     },
@@ -34,23 +32,25 @@ const listOptions = $computed(() => {
 })
 
 // 查看
-let labelVisible = $ref(false)
-const currentRow = ref<Info>()
-function handleView(row: Info) {
-  row.name = userInfoData.name
-  row.levels = userInfoData.levels
-  currentRow.value = row
-  labelVisible = true
+let viewVisible = $ref(false)
+let currentRow = $ref<RoleMember>()
+function handleView(row: RoleMember) {
+  currentRow = row
+  viewVisible = true
 }
 </script>
 
 <template>
   <AppCard title="用户信息">
     <AppList v-bind="listOptions" ref="appList">
-      <template #table-x="{ row }: { row: Info }">
+      <template #table-x="{ row }: { row: RoleMember }">
         <el-button text type="primary" @click="handleView(row)">查看详情</el-button>
       </template>
     </AppList>
-    <UserInfo v-if="labelVisible && currentRow" v-model="labelVisible" :data="currentRow"></UserInfo>
+    <UserInfo
+      v-if="viewVisible && roleInfo && currentRow"
+      v-model="viewVisible"
+      :role="roleInfo"
+      :data="currentRow"></UserInfo>
   </AppCard>
 </template>

src/modules/base/roles/views/Index.vue

@@ -10,17 +10,12 @@ const listOptions = $computed(() => {
   return {
     remote: {
       httpRequest: getManagementList,
-      params: {
-        user_name: '',
-        mobile: '',
-        email: '',
-        role_name: ''
-      }
+      params: { user_name: '', mobile: '', email: '', role_name: '' }
     },
     filters: [
       { type: 'input', prop: 'user_name', placeholder: '请输入用户姓名' },
       { type: 'input', prop: 'mobile', placeholder: '请输入用户手机号' },
-      { type: 'input', prop: 'email', placeholder: '请输入角色邮箱' },
+      { type: 'input', prop: 'email', placeholder: '请输入用户邮箱' },
       { type: 'input', prop: 'role_name', placeholder: '请输入角色名称' }
     ],
     columns: [
@@ -29,20 +24,14 @@ const listOptions = $computed(() => {
       { label: '包含用户数量', prop: 'user_count' },
       { label: '角色类型', prop: 'levels' },
       { label: '更新时间', prop: 'updated_at' },
-      { label: '操作', prop: 'name', slots: 'table-x', width: 100 }
-    ],
-    data: [
-      { id: 1, code: 123 },
-      { id: 2, code: 456 }
+      { label: '操作', slots: 'table-x', width: 100 }
     ]
   }
 })
 
 // 查看
 function handleView(row: any) {
-  router.push({
-    path: `/base/roles/detail/${row.id}`
-  })
+  router.push({ path: `/base/roles/detail/${row.id}` })
 }
 </script>