feat(admin): 短剧类型与内容类型多选

src/views/contentManagement/DramaManagementView.vue

@@ -29,8 +29,8 @@ const categories = ref([])
 
 const keyword = ref('')
 const statusFilter = ref(undefined)
-const categoryId = ref(undefined)
-const dramaTypeFilter = ref(undefined)
+const categoryIds = ref([])
+const dramaTypes = ref([])
 const hotFilter = ref(undefined)
 const pageIndex = ref(1)
 const pageSize = ref(10)
@@ -47,8 +47,8 @@ const editingLikeCount = ref(0)
 const formRef = ref()
 const form = reactive({
   title: '',
-  categoryId: undefined,
-  dramaType: 'LIVE',
+  categoryIds: [],
+  dramaTypes: ['LIVE'],
   description: '',
   freeEpisodes: 3,
   unlockCoin: 0,
@@ -63,8 +63,12 @@ const COVER_TYPES = ['image/jpeg', 'image/png', 'image/webp']
 
 const formRules = {
   title: [{ required: true, message: '请输入短剧名称', trigger: 'blur' }],
-  categoryId: [{ required: true, message: '请选择短剧类型', trigger: 'change' }],
-  dramaType: [{ required: true, message: '请选择内容类型', trigger: 'change' }]
+  categoryIds: [
+    { type: 'array', required: true, min: 1, message: '请至少选择一个类型', trigger: 'change' }
+  ],
+  dramaTypes: [
+    { type: 'array', required: true, min: 1, message: '请至少选择一个内容类型', trigger: 'change' }
+  ]
 }
 
 const coverDisplayName = computed(
@@ -106,8 +110,8 @@ async function load() {
       pageSize: pageSize.value,
       keyword: keyword.value.trim() || undefined,
       status: statusFilter.value || undefined,
-      categoryId: categoryId.value,
-      dramaTypes: dramaTypeFilter.value ? [dramaTypeFilter.value] : undefined,
+      categoryIds: categoryIds.value.length ? categoryIds.value : undefined,
+      dramaTypes: dramaTypes.value.length ? dramaTypes.value : undefined,
       isHot: hotFilter.value
     })
     list.value = res.data?.list || []
@@ -130,8 +134,8 @@ function search() {
 function resetFilters() {
   keyword.value = ''
   statusFilter.value = undefined
-  categoryId.value = undefined
-  dramaTypeFilter.value = undefined
+  categoryIds.value = []
+  dramaTypes.value = []
   hotFilter.value = undefined
   search()
 }
@@ -156,8 +160,8 @@ function openCreate() {
   editingId.value = null
   Object.assign(form, {
     title: '',
-    categoryId: undefined,
-    dramaType: 'LIVE',
+    categoryIds: [],
+    dramaTypes: ['LIVE'],
     description: '',
     freeEpisodes: 3,
     unlockCoin: 0,
@@ -178,8 +182,18 @@ function openEdit(row) {
   editingId.value = row.id
   Object.assign(form, {
     title: row.title,
-    categoryId: row.categoryId || undefined,
-    dramaType: row.dramaType || 'LIVE',
+    categoryIds:
+      Array.isArray(row.categoryIds) && row.categoryIds.length
+        ? row.categoryIds
+        : row.categoryId
+          ? [row.categoryId]
+          : [],
+    dramaTypes:
+      Array.isArray(row.dramaTypes) && row.dramaTypes.length
+        ? row.dramaTypes
+        : row.dramaType
+          ? [row.dramaType]
+          : ['LIVE'],
     description: row.description || '',
     freeEpisodes: row.freeEpisodes ?? 3,
     unlockCoin: row.unlockCoin ?? 0,
@@ -200,6 +214,16 @@ function dramaTypeLabel(value) {
   return dramaTypeOptions.find((item) => item.value === value)?.label || '真人剧'
 }
 
+function rowCategoryNames(row) {
+  const names = Array.isArray(row.categoryNames) ? row.categoryNames.filter(Boolean) : []
+  return names.length ? names.join(' / ') : row.genre || '—'
+}
+
+function rowDramaTypes(row) {
+  if (Array.isArray(row.dramaTypes) && row.dramaTypes.length) return row.dramaTypes
+  return row.dramaType ? [row.dramaType] : []
+}
+
 async function saveDrama() {
   if (saving.value || uploadingCover.value) return
   try {
@@ -207,11 +231,13 @@ async function saveDrama() {
   } catch {
     return
   }
-  const category = categories.value.find((item) => item.id === form.categoryId)
+  const categoryNames = form.categoryIds
+    .map((id) => categories.value.find((item) => item.id === id)?.name)
+    .filter(Boolean)
   const payload = {
     ...form,
     title: form.title.trim(),
-    genre: category?.name || ''
+    genre: categoryNames.join(' / ')
   }
   saving.value = true
   try {
@@ -366,13 +392,27 @@ onMounted(async () => {
             :key="item.code"
             :label="item.text"
             :value="item.code" /></el-select
-        ><el-select v-model="categoryId" clearable placeholder="全部类型" @change="search"
+        ><el-select
+          v-model="categoryIds"
+          multiple
+          collapse-tags
+          collapse-tags-tooltip
+          clearable
+          placeholder="全部类型"
+          @change="search"
           ><el-option
             v-for="item in categories"
             :key="item.id"
             :label="item.name"
             :value="item.id" /></el-select
-        ><el-select v-model="dramaTypeFilter" clearable placeholder="全部内容类型" @change="search"
+        ><el-select
+          v-model="dramaTypes"
+          multiple
+          collapse-tags
+          collapse-tags-tooltip
+          clearable
+          placeholder="全部内容类型"
+          @change="search"
           ><el-option
             v-for="item in dramaTypeOptions"
             :key="item.value"
@@ -416,12 +456,20 @@ onMounted(async () => {
           ><span v-else class="table-empty-text">—</span></template
         ></el-table-column
       >
-      <el-table-column prop="genre" label="类型" width="110" />
-      <el-table-column label="内容类型" width="110"
+      <el-table-column label="类型" min-width="150" show-overflow-tooltip
+        ><template #default="{ row }">{{ rowCategoryNames(row) }}</template>
+      </el-table-column>
+      <el-table-column label="内容类型" min-width="150"
         ><template #default="{ row }"
-          ><el-tag :type="row.dramaType === 'ANIME' ? 'warning' : 'info'" effect="light">{{
-            dramaTypeLabel(row.dramaType)
-          }}</el-tag></template
+          ><div class="table-actions"
+            ><el-tag
+              v-for="type in rowDramaTypes(row)"
+              :key="type"
+              :type="type === 'ANIME' ? 'warning' : 'info'"
+              effect="light"
+              >{{ dramaTypeLabel(type) }}</el-tag
+            ></div
+          ></template
         ></el-table-column
       >
       <el-table-column label="集数" width="90"
@@ -533,8 +581,15 @@ onMounted(async () => {
           <el-form-item label="短剧名称" prop="title">
             <el-input v-model="form.title" maxlength="80" placeholder="请输入短剧名称" />
           </el-form-item>
-          <el-form-item label="类型" prop="categoryId">
-            <el-select v-model="form.categoryId" placeholder="请选择类型">
+          <el-form-item label="类型" prop="categoryIds">
+            <el-select
+              v-model="form.categoryIds"
+              multiple
+              collapse-tags
+              collapse-tags-tooltip
+              filterable
+              placeholder="请选择类型"
+            >
               <el-option
                 v-for="item in categories"
                 :key="item.id"
@@ -543,8 +598,15 @@ onMounted(async () => {
               />
             </el-select>
           </el-form-item>
-          <el-form-item label="内容类型" prop="dramaType">
-            <el-select v-model="form.dramaType" placeholder="请选择内容类型">
+          <el-form-item label="内容类型" prop="dramaTypes">
+            <el-select
+              v-model="form.dramaTypes"
+              multiple
+              collapse-tags
+              collapse-tags-tooltip
+              filterable
+              placeholder="请选择内容类型"
+            >
               <el-option
                 v-for="item in dramaTypeOptions"
                 :key="item.value"