소스 검색

更新推广链接列表接口,支持通过团队ID查询,并在链接视图中添加团队选择功能,仅管理员角色可见。同时优化了搜索表单和数据过滤逻辑。

wuyi 3 달 전
부모
커밋
831dac3fb4
2개의 변경된 파일65개의 추가작업 그리고 32개의 파일을 삭제
  1. 2 2
      src/services/api.js
  2. 63 30
      src/views/LinkView.vue

+ 2 - 2
src/services/api.js

@@ -380,9 +380,9 @@ export const createLink = async (linkData) => {
 }
 
 // 获取推广链接列表
-export const listLinks = async (page = 0, size = 20, name, type) => {
+export const listLinks = async (page = 0, size = 20, teamId, type) => {
   const params = { page, size }
-  if (name) params.name = name
+  if (teamId) params.teamId = teamId
   if (type) params.type = type
 
   const response = await api.get('/links', { params })

+ 63 - 30
src/views/LinkView.vue

@@ -2,13 +2,17 @@
   <div class="rounded-lg p-4 bg-[var(--p-content-background)]">
     <!-- 搜索和操作区域 -->
     <div class="flex flex-wrap items-center gap-2 mb-6">
-      <InputText v-model="searchForm.id" placeholder="ID" size="small" class="w-32" @keyup.enter="handleSearch" />
-      <InputText
-        v-model="searchForm.name"
-        placeholder="链接名称"
+      <!-- 团队选择(仅admin角色显示) -->
+      <Select
+        v-if="isAdmin"
+        v-model="searchForm.teamId"
+        :options="teamOptions"
+        optionLabel="label"
+        optionValue="value"
+        placeholder="选择团队"
         size="small"
         class="w-32"
-        @keyup.enter="handleSearch"
+        :showClear="true"
       />
       <Select
         v-model="searchForm.type"
@@ -60,7 +64,11 @@
             </div>
 
             <!-- 操作按钮 - 固定在右下角 -->
-            <div class="absolute bottom-4 right-4 flex gap-2">
+            <div class="absolute bottom-4 right-4 flex items-center gap-2">
+              <!-- 团队名称(仅admin角色显示) -->
+              <span v-if="isAdmin && link.teamId" class="text-xs text-gray-500 bg-gray-100 px-2 py-1 rounded">
+                {{ getTeamName(link.teamId) }}
+              </span>
               <Button
                 icon="pi pi-copy"
                 size="small"
@@ -122,7 +130,11 @@
             </div>
 
             <!-- 操作按钮 - 固定在右下角 -->
-            <div class="absolute bottom-4 right-4 flex gap-2">
+            <div class="absolute bottom-4 right-4 flex items-center gap-2">
+              <!-- 团队名称(仅admin角色显示) -->
+              <span v-if="isAdmin && link.teamId" class="text-xs text-gray-500 bg-gray-100 px-2 py-1 rounded">
+                {{ getTeamName(link.teamId) }}
+              </span>
               <Button
                 icon="pi pi-copy"
                 size="small"
@@ -184,7 +196,10 @@
             </div>
 
             <!-- 操作按钮 - 固定在右下角 -->
-            <div class="absolute bottom-4 right-4 flex gap-2">
+            <div class="absolute bottom-4 right-4 flex items-center gap-2">
+              <span v-if="isAdmin && link.teamId" class="text-xs text-gray-500 bg-gray-100 px-2 py-1 rounded">
+                {{ getTeamName(link.teamId) }}
+              </span>
               <Button
                 icon="pi pi-copy"
                 size="small"
@@ -286,11 +301,8 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue'
-import { useDateFormat } from '@vueuse/core'
+import { ref, onMounted, computed, inject } from 'vue'
 import Button from 'primevue/button'
-import Column from 'primevue/column'
-import DataTable from 'primevue/datatable'
 import Dialog from 'primevue/dialog'
 import Select from 'primevue/select'
 import InputText from 'primevue/inputtext'
@@ -300,10 +312,16 @@ import { useToast } from 'primevue/usetoast'
 import { usePrimeVue } from 'primevue/config'
 import { listLinks, createLink, updateLink, deleteLink, uploadImage } from '@/services/api'
 import { LinkType } from '@/enums'
+import { useTeamStore } from '@/stores/team'
+import { useUserStore } from '@/stores/user'
 
 const toast = useToast()
 const confirm = useConfirm()
 const $primevue = usePrimeVue()
+const teamStore = useTeamStore()
+const userStore = useUserStore()
+
+const isAdmin = inject('isAdmin')
 
 // 表格数据
 const tableData = ref({
@@ -340,9 +358,8 @@ const editForm = ref({
 
 // 搜索表单
 const searchForm = ref({
-  id: null,
-  name: null,
-  type: null
+  type: null,
+  teamId: null
 })
 
 // 链接类型选项
@@ -353,6 +370,17 @@ const typeOptions = [
   { label: LinkType.browser, value: 'browser' }
 ]
 
+// 团队选项
+const teamOptions = computed(() => {
+  const options = [{ label: '全部团队', value: null }]
+  if (teamStore.teams && teamStore.teams.length > 0) {
+    teamStore.teams.forEach((team) => {
+      options.push({ label: team.name, value: team.id })
+    })
+  }
+  return options
+})
+
 // 获取链接类型文本
 const getLinkTypeText = (type) => {
   return LinkType[type] || type
@@ -368,6 +396,13 @@ const getLinkTypeClass = (type) => {
   return classMap[type] || ''
 }
 
+// 获取团队名称
+const getTeamName = (teamId) => {
+  if (!teamId || !teamStore.teams) return ''
+  const team = teamStore.teams.find((t) => t.id === teamId)
+  return team ? team.name : `团队${teamId}`
+}
+
 // 获取数据
 const fetchData = async () => {
   loading.value = true
@@ -375,7 +410,7 @@ const fetchData = async () => {
     const response = await listLinks(
       tableData.value.metadata.page,
       tableData.value.metadata.size,
-      searchForm.value.name || undefined,
+      searchForm.value.teamId || undefined,
       searchForm.value.type || undefined
     )
     tableData.value = response
@@ -396,21 +431,16 @@ const fetchData = async () => {
 const applyFilters = () => {
   let links = [...tableData.value.content]
 
-  // ID 过滤
-  if (searchForm.value.id) {
-    links = links.filter((link) => link.id.toString().includes(searchForm.value.id))
-  }
-
-  // 名称过滤
-  if (searchForm.value.name) {
-    links = links.filter((link) => link.name && link.name.toLowerCase().includes(searchForm.value.name.toLowerCase()))
-  }
-
   // 类型过滤
   if (searchForm.value.type) {
     links = links.filter((link) => link.type === searchForm.value.type)
   }
 
+  // 团队过滤
+  if (searchForm.value.teamId) {
+    links = links.filter((link) => link.teamId === searchForm.value.teamId)
+  }
+
   filteredLinks.value = links
 }
 
@@ -427,9 +457,8 @@ const handleSearch = () => {
 // 刷新处理
 const handleRefresh = () => {
   searchForm.value = {
-    id: null,
-    name: null,
-    type: null
+    type: null,
+    teamId: null
   }
   fetchData()
 }
@@ -638,7 +667,11 @@ const saveEdit = async () => {
 }
 
 // 初始化
-onMounted(() => {
+onMounted(async () => {
+  if (isAdmin.value) {
+    await teamStore.loadTeams()
+  }
+
   fetchData()
 })
 </script>