Browse Source

在团队成员视图中添加管理员角色权限控制,优化搜索和编辑功能,仅管理员可见团队ID和选择团队的相关输入框,增强用户体验。

wuyi 3 months ago
parent
commit
a32321bc05
1 changed files with 18 additions and 12 deletions
  1. 18 12
      src/views/TeamMembersView.vue

+ 18 - 12
src/views/TeamMembersView.vue

@@ -15,7 +15,14 @@
     >
     >
       <template #header>
       <template #header>
         <div class="flex flex-wrap items-center gap-2">
         <div class="flex flex-wrap items-center gap-2">
-          <InputText v-model="searchForm.id" placeholder="ID" size="small" class="w-32" @keyup.enter="handleSearch" />
+          <InputText
+            v-if="isAdmin"
+            v-model="searchForm.id"
+            placeholder="ID"
+            size="small"
+            class="w-32"
+            @keyup.enter="handleSearch"
+          />
           <InputText
           <InputText
             v-model="searchForm.name"
             v-model="searchForm.name"
             placeholder="成员名称"
             placeholder="成员名称"
@@ -24,6 +31,7 @@
             @keyup.enter="handleSearch"
             @keyup.enter="handleSearch"
           />
           />
           <Select
           <Select
+            v-if="isAdmin"
             v-model="searchForm.teamId"
             v-model="searchForm.teamId"
             :options="teamOptions"
             :options="teamOptions"
             optionLabel="label"
             optionLabel="label"
@@ -64,7 +72,7 @@
         </template>
         </template>
       </Column>
       </Column>
 
 
-      <Column field="teamId" header="所属团队" style="min-width: 120px">
+      <Column v-if="isAdmin" field="teamId" header="所属团队" style="min-width: 120px">
         <template #body="slotProps">
         <template #body="slotProps">
           <span class="team-name-text font-medium">
           <span class="team-name-text font-medium">
             {{ getTeamName(slotProps.data.teamId) }}
             {{ getTeamName(slotProps.data.teamId) }}
@@ -142,7 +150,7 @@
           <InputText id="edit-name" v-model="editForm.name" class="w-full" />
           <InputText id="edit-name" v-model="editForm.name" class="w-full" />
         </div>
         </div>
 
 
-        <div class="field mt-4">
+        <div v-if="isAdmin" class="field mt-4">
           <label for="edit-teamId" class="font-medium text-sm mb-2 block">选择团队</label>
           <label for="edit-teamId" class="font-medium text-sm mb-2 block">选择团队</label>
           <Select
           <Select
             id="edit-teamId"
             id="edit-teamId"
@@ -194,7 +202,7 @@
 </template>
 </template>
 
 
 <script setup>
 <script setup>
-import { ref, onMounted, computed } from 'vue'
+import { ref, onMounted, computed, inject } from 'vue'
 import Button from 'primevue/button'
 import Button from 'primevue/button'
 import Column from 'primevue/column'
 import Column from 'primevue/column'
 import DataTable from 'primevue/datatable'
 import DataTable from 'primevue/datatable'
@@ -212,7 +220,10 @@ const toast = useToast()
 const confirm = useConfirm()
 const confirm = useConfirm()
 const teamStore = useTeamStore()
 const teamStore = useTeamStore()
 
 
-// 团队选项(用于搜索)
+const isAdmin = inject('isAdmin')
+const isTeam = inject('isTeam')
+
+// 团队选项
 const teamOptions = computed(() => {
 const teamOptions = computed(() => {
   return [
   return [
     { label: '全部团队', value: null },
     { label: '全部团队', value: null },
@@ -223,7 +234,6 @@ const teamOptions = computed(() => {
   ]
   ]
 })
 })
 
 
-// 团队选项(用于新增/编辑,不包含全部团队)
 const teamSelectOptions = computed(() => {
 const teamSelectOptions = computed(() => {
   return teamStore.teams.map((team) => ({
   return teamStore.teams.map((team) => ({
     label: team.name,
     label: team.name,
@@ -231,14 +241,12 @@ const teamSelectOptions = computed(() => {
   }))
   }))
 })
 })
 
 
-// 根据团队ID获取团队名称
 const getTeamName = (teamId) => {
 const getTeamName = (teamId) => {
   if (!teamId) return '-'
   if (!teamId) return '-'
   const team = teamStore.teams.find((t) => t.id === teamId)
   const team = teamStore.teams.find((t) => t.id === teamId)
   return team ? team.name : '-'
   return team ? team.name : '-'
 }
 }
 
 
-// 根据团队ID获取团队的userId
 const getTeamUserId = (teamId) => {
 const getTeamUserId = (teamId) => {
   if (!teamId) return null
   if (!teamId) return null
   const team = teamStore.teams.find((t) => t.id === teamId)
   const team = teamStore.teams.find((t) => t.id === teamId)
@@ -414,14 +422,13 @@ const openEditDialog = (member) => {
 const saveEdit = async () => {
 const saveEdit = async () => {
   editLoading.value = true
   editLoading.value = true
   try {
   try {
-    // 过滤掉空值参数
     const formData = {}
     const formData = {}
     if (editForm.value.name !== null && editForm.value.name !== '') {
     if (editForm.value.name !== null && editForm.value.name !== '') {
       formData.name = editForm.value.name
       formData.name = editForm.value.name
     }
     }
-    if (editForm.value.teamId !== null && editForm.value.teamId !== '') {
+
+    if (isAdmin && editForm.value.teamId !== null && editForm.value.teamId !== '') {
       formData.teamId = editForm.value.teamId
       formData.teamId = editForm.value.teamId
-      // 使用选中团队的userId作为teamUserId
       formData.teamUserId = getTeamUserId(editForm.value.teamId)
       formData.teamUserId = getTeamUserId(editForm.value.teamId)
     }
     }
 
 
@@ -450,7 +457,6 @@ const saveEdit = async () => {
   }
   }
 }
 }
 
 
-// 初始化
 onMounted(() => {
 onMounted(() => {
   fetchData()
   fetchData()
 })
 })