refactor: 重构角色管理

95df79b3 · 王鹏飞 · ae079c8b · 95df79b3 · 95df79b3 · 95df79b3
--- a/src/modules/base/roles/components/UserInfo.vue
+++ b/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 {
+<style lang="scss" scoped>
+.el-tag {
+  margin-bottom: 10px;
  margin-right: 10px;
-        }
-      }
-    }
-  }
 }
 </style>
--- a/src/modules/base/roles/types.ts
+++ b/src/modules/base/roles/types.ts
@@ -7,3 +7,26 @@ export interface Info {
  projects: string | string[]
  channels: string | string[]
 }
+
+// 角色信息
+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[]
+}
--- a/src/modules/base/roles/views/Details.vue
+++ b/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>
--- a/src/modules/base/roles/views/Index.vue
+++ b/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>