✨ feat<数据中心>: 添加平台筛选

src/views/reportManage/dataCenter/normalDisplay/components/Selector/index.vue

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import { onMounted, ref, watch } from 'vue';
 import { getOperationSelect, getTasks, getTasksId } from '/@/views/reportManage/TaskManage/api';
 
@@ -17,6 +17,7 @@ const operationList = ref(localStorage.getItem('operationList') || '');
 const usersList = ref(JSON.parse(localStorage.getItem('usersList') || '[]'));
 const countryList = ref(JSON.parse(localStorage.getItem('countryList') || '[]'));
 const brandNameList = ref(JSON.parse(localStorage.getItem('brandNameList') || '[]'));
+const platformList = ref(JSON.parse(localStorage.getItem('platformList') || '[]'));
 
 const platformNumberOptions = ref([]);
 const platformNameOptions = ref([]);
@@ -24,6 +25,7 @@ const usersOptions = ref([]);
 const operationOptions = ref([]);
 const countryOptions = ref([]);
 const brandNameOptions = ref([]);
+const platformOptions = ref([]);
 
 function sortCountriesByInitial(countries) {
   return countries.sort((a, b) => a.localeCompare(b));
@@ -53,6 +55,7 @@ async function fetchAllTasks() {
   operationOptions.value = [...new Set(allData.map(item => item.operater))];
   countryOptions.value = sortCountriesByInitial([...new Set(allData.map(item => item.country))]);
   brandNameOptions.value = [...new Set(allData.map(item => item.brandName))];
+  platformOptions.value = [...new Set(allData.map(item => item.platform).filter(platform => platform !== null && platform !== undefined && platform !== ''))];
 }
 
 async function fetchUsersSelect() {
@@ -90,6 +93,7 @@ async function fetchFilteredData() {
   processFilterSingle(operationList.value, 'operater');
   processFilterMultiple(countryList, 'country', 'countrys');
   processFilterMultiple(brandNameList, 'brandName', 'brandNames');
+  processFilterMultiple(platformList, 'platform', 'platforms');
   if (usersList.value.length > 0) {
     filters.users = usersList.value.join(',');
   }
@@ -115,9 +119,10 @@ async function emitChange() {
   //localStorage.setItem('usersList', JSON.stringify(usersList.value));
   localStorage.setItem('countryList', JSON.stringify(countryList.value));
   localStorage.setItem('brandNameList', JSON.stringify(brandNameList.value));
+  localStorage.setItem('platformList', JSON.stringify(platformList.value));
 }
 
-watch([countryList, brandNameList, usersList], () => {
+watch([countryList, brandNameList, usersList, platformList], () => {
   emitChange();
 });
 
@@ -132,18 +137,27 @@ defineExpose({ fetchFilteredData, filteredData, updateData });
 
 <template>
   <div class="flex-container">
-    <el-input v-model="platformNumberList" @change="emitChange" placeholder="平台编号" class="flex-item" clearable></el-input>
-    <el-input v-model="platformNameList" @change="emitChange" placeholder="平台名称" class="flex-item" clearable></el-input>
-    <el-input v-model="operationList" @change="emitChange" placeholder="运营" class="flex-item" clearable></el-input>
-    <el-select v-if="props.showOperationSearch" v-model="usersList" multiple collapse-tags collapse-tags-tooltip placeholder="填写人" class="flex-item">
+    <el-input v-model="platformNumberList" class="flex-item" clearable placeholder="平台编号"
+              @change="emitChange"></el-input>
+    <el-input v-model="platformNameList" class="flex-item" clearable placeholder="平台名称"
+              @change="emitChange"></el-input>
+    <el-input v-model="operationList" class="flex-item" clearable placeholder="运营" @change="emitChange"></el-input>
+    <el-select v-if="props.showOperationSearch" v-model="usersList" class="flex-item" collapse-tags
+               collapse-tags-tooltip
+               multiple placeholder="填写人">
       <el-option v-for="item in usersOptions" :key="item.value" :label="item.label" :value="item.value" />
     </el-select>
-    <el-select v-model="countryList" multiple collapse-tags collapse-tags-tooltip placeholder="国家" class="flex-item">
+    <el-select v-model="countryList" class="flex-item" collapse-tags collapse-tags-tooltip multiple placeholder="国家">
       <el-option v-for="item in countryOptions" :key="item" :label="item" :value="item" />
     </el-select>
-    <el-select v-model="brandNameList" multiple collapse-tags collapse-tags-tooltip placeholder="品牌" class="flex-item">
+    <el-select v-model="brandNameList" class="flex-item" collapse-tags collapse-tags-tooltip multiple
+               placeholder="品牌">
       <el-option v-for="item in brandNameOptions" :key="item" :label="item" :value="item" />
     </el-select>
+    <el-select v-model="platformList" class="flex-item" collapse-tags collapse-tags-tooltip multiple
+               placeholder="平台">
+      <el-option v-for="item in platformOptions" :key="item" :label="item" :value="item" />
+    </el-select>
   </div>
 </template>