|
|
@@ -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>
|