refactor: 重构用户管理

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

 <script setup lang="ts">
+import type { UserInfo, UserProject, UserChannel } from '../types'
 import { getMemberDetail } from '../api'
 
-const emit = defineEmits<{
-  (e: 'update:modelValue', visible: boolean): void
-}>()
+const prop = defineProps<{ id: string }>()
 
-const prop = defineProps({
-  id: String
-})
-
-interface Channels {
-  channel_id: string
-  title: string
-  roles: string[]
+let userInfo = $ref<UserInfo>()
+function fetchInfo() {
+  getMemberDetail({ user_id: prop.id }).then(res => {
+    userInfo = res.data
+  })
 }
-
-interface Info {
-  user_id: string
-  user_name: string
-  mobile: string
-  email: string
-  projects: [
-    {
-      title: string
-      project_id: string
-      roles: string[]
-      channels: Channels[]
-    }
-  ]
-}
-
-let userInfo = $ref<Info>()
-getMemberDetail({ user_id: prop.id }).then((res: any) => {
-  userInfo = res.data
-  console.log(userInfo, 'userInfouserInfo')
+onMounted(() => {
+  fetchInfo()
 })
 
-const projectValue = $ref()
-const channelValue = $ref()
-let projectRole = $ref<string[]>()
-let channelRole = $ref<string[]>()
-let channelsOption = $ref<Channels[]>()
-// 项目渠道联动
-const projectChange = function () {
-  const findData = userInfo.projects.find(item => item.project_id === projectValue)
-  if (findData) {
-    channelsOption = findData.channels
-    projectRole = findData.roles
-  }
-}
-
-// 选择渠道
-const channelChange = function () {
-  const findData = channelsOption.find(item => item.channel_id === channelValue)
-  if (findData) {
-    channelRole = findData.roles
-  }
-}
+// 项目
+const projectValue = $ref<UserProject>()
+// 渠道
+const channelValue = $ref<UserChannel>()
 </script>
 
 <template>
@@ -80,47 +41,39 @@ const channelChange = function () {
         <div class="item">
           <div class="label">选择项目：</div>
           <div class="value">
-            <el-select @change="projectChange" v-model="projectValue" class="m-2" placeholder="选择项目" size="small">
-              <el-option
-                v-for="item in userInfo.projects"
-                :key="item.project_id"
-                :label="item.title"
-                :value="item.project_id"
-              />
+            <el-select v-model="projectValue" placeholder="选择项目" size="small" value-key="project_id">
+              <el-option v-for="item in userInfo.projects" :key="item.project_id" :label="item.title" :value="item" />
             </el-select>
           </div>
         </div>
         <div class="item">
           <div class="label">角色权限：</div>
-          <div v-for="(item, index) in projectRole" :key="index" class="value" style="margin-right: 10px">
+          <div v-for="(item, index) in projectValue?.roles" :key="index" class="value" style="margin-right: 10px">
             <el-tag>{{ item }}</el-tag>
           </div>
         </div>
         <div class="item mt-20">
           <div class="label">选择渠道：</div>
           <div class="value">
-            <el-select @change="channelChange" v-model="channelValue" class="m-2" placeholder="选择渠道" size="small">
+            <el-select v-model="channelValue" placeholder="选择渠道" size="small" value-key="channel_id">
               <el-option
-                v-for="item in channelsOption"
+                v-for="item in projectValue?.channels"
                 :key="item.channel_id"
                 :label="item.title"
-                :value="item.channel_id"
-              />
+                :value="item" />
             </el-select>
           </div>
         </div>
         <div class="item">
           <div class="label">角色权限：</div>
-          <div v-for="(item, index) in channelRole" :key="index" class="value" style="margin-right: 10px">
+          <div v-for="(item, index) in channelValue?.roles" :key="index" class="value" style="margin-right: 10px">
             <el-tag>{{ item }}</el-tag>
           </div>
         </div>
       </div>
     </el-card>
     <template #footer>
-      <span class="dialog-footer">
-        <el-button @click="emit('update:modelValue', false)">关闭</el-button>
-      </span>
+      <el-button @click="$emit('update:modelValue', false)">关闭</el-button>
     </template>
   </el-dialog>
 </template>

src/modules/base/users/types.ts

+export interface UserItem {
+  email: string
+  mobile: string
+  roles_count: number
+  user_id: string
+  user_name: string
+}
+
+export interface UserProject {
+  project_id: string
+  title: string
+  channels: UserChannel[]
+  roles: string[]
+}
+
+export interface UserChannel {
+  channel_id: string
+  title: string
+  projects: string[]
+  roles: string[]
+}
+
+export type UserInfo = UserItem & { projects: UserProject[] }

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

 <script setup lang="ts">
+import type { UserItem } from '../types'
 import AppList from '@/components/base/AppList.vue'
 
 import { getMemberList } from '../api'
@@ -35,19 +36,19 @@ const listOptions = $computed(() => {
 })
 
 // 查看
-let labelVisible = $ref(false)
-let currentRowId = $ref('')
-function handleView(row: any) {
-  currentRowId = row.user_id
-  labelVisible = true
+let viewVisible = $ref(false)
+let currentRow = $ref<UserItem>()
+function handleView(row: UserItem) {
+  currentRow = row
+  viewVisible = true
 }
 </script>
 
 <template>
   <AppCard title="用户管理">
     <AppList v-bind="listOptions" ref="appList">
-      <UserInfo v-if="currentRowId && labelVisible" v-model="labelVisible" :id="currentRowId"></UserInfo>
-      <template #table-x="{ row }">
+      <UserInfo v-model="viewVisible" :id="currentRow.user_id" v-if="viewVisible && currentRow"></UserInfo>
+      <template #table-x="{ row }: { row: UserItem }">
         <el-button text type="primary" @click="handleView(row)">查看</el-button>
       </template>
     </AppList>