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