完成筛选

src/components/common-select/index.vue

@@ -13,7 +13,10 @@
     @change="handleChange"
   >
     <a-option v-for="(item, index) in options" :key="index" :value="item.id" :label="item.name">
+      <div class="flex items-center">
+        <img v-if="item.icon" :src="item.icon" class="w-16px h-16px mr-8px rounded-4px" />
         {{ item.name }}
+      </div>
     </a-option>
   </a-select>
 </template>

src/views/property-marketing/assignment-management/index.vue

@@ -148,6 +148,7 @@
                   <CommonSelect
                     v-model="query.accounts"
                     :options="accountList"
+                    :multiple="true"
                     @change="
                       (val) => {
                         handleFilterChange('account_id', val, accountList);
@@ -356,9 +357,13 @@ const {
   DEFAULT_PAGE_INFO,
 } = useTableSelectionWithPagination({
   onPageChange: () => {
+    query.page = pageInfo.page;
+    query.page_size = pageInfo.page_size;
     handleSearch();
   },
   onPageSizeChange: () => {
+    query.page = pageInfo.page;
+    query.page_size = pageInfo.page_size;
     handleSearch();
   },
 });
@@ -415,13 +420,13 @@ const data = ref<any[]>([]);
 const operators = ref([]);
 const accountList = ref([]);
 const platformOptions = ref([
-  { id: 0, name: '抖音' },
+  { id: 0, name: '抖音', icon: icon1 },
-  { id: 1, name: '小红书' },
+  { id: 1, name: '小红书', icon: icon2 },
-  { id: 2, name: 'B站' },
+  { id: 2, name: 'B站', icon: icon8 },
-  { id: 3, name: '快手' },
+  { id: 3, name: '快手', icon: icon7 },
-  { id: 4, name: '视频号' },
+  { id: 4, name: '视频号', icon: icon4 },
-  { id: 5, name: '微博' },
+  { id: 5, name: '微博', icon: icon5 },
-  { id: 6, name: '公众号' },
+  { id: 6, name: '公众号', icon: icon6 },
 ]);
 
 const query = reactive({
@@ -504,6 +509,21 @@ const getPlatformIcon = (platform: number) => {
   return platformIcons[platform] || icon3; // 默认图标
 };
 
+// 根据平台ID获取平台名称
+const getPlatformName = (platform: number) => {
+  const platformNames: { [key: number]: string } = {
+    0: '抖音',
+    1: '小红书',
+    2: 'B站',
+    3: '快手',
+    4: '视频号',
+    5: '微博',
+    6: '公众号',
+  };
+
+  return platformNames[platform] || '未知平台';
+};
+
 // 获取任务颜色
 const getTaskColor = (taskType: number, executionTime: number) => {
   // 判断任务是否已过期
@@ -792,38 +812,43 @@ const handleFilterChange = (field: string, value: any, options?: any[]) => {
           // 多选情况
           const selectedOperators = options.filter((op) => value.includes(op.name)).map((op) => op.value);
           query.operator_ids = selectedOperators;
-          console.log('选中的运营人员完整信息(多选):', selectedOperators);
+        }
+      } else {
+        query.operator_ids = [];
+      }
+      console.log('选中的运营人员完整信息(多选):', query.operator_ids);
       handleSearch();
       break;
-        }
-      }
-      break;
     case 'account_id':
-      console.log('账号名称选择:', value);
+      // 查找选中的账号完整信息
-      // 查找选中的平台完整信息
       if (options && value !== undefined && value !== '') {
         if (Array.isArray(value)) {
+          console.log(options, value);
           // 多选情况
-          const selectedPlatforms = options.filter((op: any) => value.includes(op.value));
+          const selectedAccounts = options.filter((op: any) => value.includes(op.name));
-          query.ids = selectedPlatforms;
+          query.ids = selectedAccounts.map((account: any) => account.value);
+        }
+      } else {
+        query.ids = [];
+      }
+      console.log('选中的账号完整信息(单选):', query.ids);
       handleSearch();
       break;
-        }
-      }
-      break;
     case 'platform':
-      console.log('发布平台选择:', value);
       // 查找选中的平台完整信息
       if (options && value !== undefined && value !== '') {
+        console.log(options, value);
         if (Array.isArray(value)) {
           // 多选情况
-          const selectedPlatforms = options.filter((op: any) => value.includes(op.value));
+          const selectedPlatforms = options.filter((op: any) => value.includes(op.id));
-          query.platforms = selectedPlatforms;
+          query.platforms = selectedPlatforms.map((account: any) => account.id);
+        }
+      } else {
+        query.platforms = [];
+      }
+      console.log('发布平台选择:', query.platforms);
       handleSearch();
       break;
-        }
-      }
-      break;
     default:
       console.log('未知筛选字段:', field, value);
   }
@@ -867,9 +892,22 @@ const getAccountList = async () => {
   try {
     const { code, data: accountData } = await getMediaAccountList();
     if (code === 200) {
+      // 创建平台映射，用于获取平台名称
+      const platformMap = {
+        0: '抖音',
+        1: '小红书',
+        2: 'B站',
+        3: '快手',
+        4: '视频号',
+        5: '微博',
+        6: '公众号',
+      };
+
       accountList.value = accountData.map((account: any) => ({
         value: account.id,
-        name: account.name,
+        name: `${account.name}(${platformMap[account.platform] || '未知平台'})`,
+        platform: account.platform,
+        icon: getPlatformIcon(account.platform),
       }));
     }
   } catch (error) {}