✨ feat<报表管理>: 国家增加常用筛选条件；

src/views/demo/index.vue

@@ -1,11 +1,66 @@
 <template>
-
+  <div>
+    <el-select
+        v-model="selectedItems"
+        multiple
+        filterable
+        clearable
+        placeholder="请选择"
+        :filter-method="searchOptions"
+        :loading="loading"
+        @focus="loadOptions"
+        style="width: 300px;"
+    >
+      <el-option
+          v-for="item in options"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+      />
+    </el-select>
+  </div>
 </template>
 
 <script setup>
+import { ref } from 'vue';
+
+// 已选中的项
+const selectedItems = ref([]);
+
+// 下拉框的选项
+const options = ref([]);
+
+// 加载状态
+const loading = ref(false);
 
-</script>
+// 模拟的异步数据源
+const allOptions = [
+  { value: 'A', label: 'Apple' },
+  { value: 'B', label: 'Banana' },
+  { value: 'C', label: 'Cherry' },
+  { value: 'D', label: 'Durian' },
+  { value: 'H', label: 'Honeydew' },
+  { value: 'K', label: 'Kiwi' },
+  // 可以继续添加更多数据
+];
 
-<style scoped>
+// 选项过滤方法
+const searchOptions = (query) => {
+  if (query) {
+    options.value = allOptions.filter(option =>
+        option.label.toLowerCase().includes(query.toLowerCase())
+    );
+  } else {
+    options.value = allOptions;
+  }
+};
 
-</style>
+// 加载所有选项
+const loadOptions = () => {
+  loading.value = true;
+  setTimeout(() => {
+    options.value = allOptions;
+    loading.value = false;
+  }, 300); // 模拟异步请求延迟
+};
+</script>

src/views/reportManage/TaskManage/index.vue

@@ -777,7 +777,7 @@ onMounted(() => {
 <template>
   <div class="p-2.5">
     <el-card class="custom-card-style flex gap-1.5 justify-between" shadow="hover">
-      <Selector ref="selectorRef" :showOperationSearch="true" @update:filteredData="filteredDataChange" />
+      <Selector ref="selectorRef" @update:filteredData="filteredDataChange" />
     </el-card>
     <el-card class="my-3" shadow="hover">
       <vxe-grid ref="xGrid" :cell-style="cellStyle" :header-cell-style="headerCellStyle" stripe v-bind="gridOptions"

src/views/reportManage/dataCenter/combinedDisplay/components/tableData/mainData.vue

@@ -283,7 +283,7 @@ function handleSortChange({ field, order }) {
   gridOptions.sortConfig.defaultSort.order = order;
   gridOptions.sortConfig.defaultSort.field = field;
   sortStatus.value = true;
-  fetchMainData(props.taskIds, true);
+  fetchMainData(taskIds.value, true);
 }
 
 // 导出数据接口

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

@@ -116,12 +116,46 @@ async function emitChange() {
   localStorage.setItem('platformNumberList', platformNumberList.value);
   localStorage.setItem('platformNameList', platformNameList.value);
   localStorage.setItem('operationList', operationList.value);
-  //localStorage.setItem('usersList', JSON.stringify(usersList.value));
+  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));
 }
 
+// 快捷选择美洲区国家
+const selectCommonGroup1 = () => {
+  countryList.value = ['美国', '加拿大', '墨西哥'];
+  emitChange(); // 更新选择后的数据
+};
+
+// 快捷选择欧洲+英国国家
+const selectCommonGroup2 = () => {
+  countryList.value = ['比利时', '德国', '法国', '荷兰', '西班牙', '意大利', '英国'];
+  emitChange(); // 更新选择后的数据
+};
+
+const clearAll = () => {
+  countryList.value = [];
+  emitChange(); // 更新选择后的数据
+};
+
+//// 搜索用户
+//const searchUsers = async (query) => {
+//  if (query) {
+//    // 当输入有值时，进行过滤
+//    usersOptions.value = usersOptions.value.filter(option =>
+//        option.label.toLowerCase().includes(query.toLowerCase())
+//    );
+//  } else {
+//    await loadUsers();
+//  }
+//};
+//
+//// 加载用户选项
+//const loadUsers = async () => {
+//  await fetchUsersSelect();
+//};
+
 watch([countryList, brandNameList, usersList, platformList], () => {
   emitChange();
 });
@@ -142,13 +176,38 @@ defineExpose({ fetchFilteredData, filteredData, updateData });
     <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
+    <el-select 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="usersList"-->
+    <!--    class="flex-item"-->
+    <!--    multiple-->
+    <!--    filterable-->
+    <!--    clearable-->
+    <!--    collapse-tags-->
+    <!--    placeholder="填写人"-->
+    <!--    :filter-method="searchUsers"-->
+
+    <!--    @change="emitChange"-->
+    <!--    style="width: 300px;"-->
+    <!--&gt;-->
+    <!--  <el-option-->
+    <!--      v-for="item in usersOptions"-->
+    <!--      :key="item.value"-->
+    <!--      :label="item.label"-->
+    <!--      :value="item.value"-->
+    <!--  />-->
+    <!--</el-select>-->
     <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" />
+      <template #footer>
+        <el-button text size="small" @click="selectCommonGroup1">美洲区</el-button>
+        <el-button text size="small" @click="selectCommonGroup2">欧洲+英国</el-button>
+        <el-button text icon="Delete" type="danger" @click="clearAll"></el-button>
+      </template>
     </el-select>
     <el-select v-model="brandNameList" class="flex-item" collapse-tags collapse-tags-tooltip multiple
                placeholder="品牌">
@@ -171,7 +230,11 @@ defineExpose({ fetchFilteredData, filteredData, updateData });
 .flex-item {
   flex: 1 1 160px; /* 自适应大小并设定最小宽度 */
   min-width: 100px;
-  max-width: 186px;
+  max-width: 300px; /* 设定最大宽度，确保不会变形 */
   height: 30px;
 }
+
+.el-select {
+  max-width: 300px; /* 确保下拉框宽度不超过最大宽度 */
+}
 </style>