Эх сурвалжийг харах

Merge branch 'xinyan' into test

xinyan 9 сар өмнө
parent
commit
cc80848ed1

+ 59 - 4
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>

+ 23 - 17
src/views/reportManage/TaskManage/index.vue

@@ -47,6 +47,7 @@ interface taskRuleForm {
   vatNumber: string;
   vatCompany: string;
 }
+
 const formSize = ref<ComponentSize>('default');
 const dialogFormVisible = ref(false);
 const taskRuleFormRef = ref<FormInstance>();
@@ -637,17 +638,20 @@ async function sendMessage(selectedValue: string) {
 
 // 导出接口
 async function handleExport() {
-  gridOptions.loading = true;
-  const response = await exportTaskData();
-
-  const url = window.URL.createObjectURL(new Blob([response.data]));
-  const link = document.createElement('a');
-  link.href = url;
-  link.setAttribute('download', '店铺数据.xlsx');
-  document.body.appendChild(link);
-  link.click();
-  gridOptions.loading = false;
-  ElMessage.success('导出数据成功');
+  try {
+    gridOptions.loading = true;
+    const response = await exportTaskData(filter.value,);
+    const url = window.URL.createObjectURL(new Blob([response.data]));
+    const link = document.createElement('a');
+    link.href = url;
+    link.setAttribute('download', '店铺数据.xlsx');
+    document.body.appendChild(link);
+    link.click();
+    gridOptions.loading = false;
+    ElMessage.success('导出数据成功');
+  } catch (error) {
+    console.error('导出数据失败:', error);
+  }
 }
 
 // 获取填写人下拉框
@@ -773,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"
@@ -923,7 +927,8 @@ onMounted(() => {
         </template>
         <template #vatCompany_edit="{ row }">
           <vxe-input v-model="row.vatCompany"></vxe-input>
-          </template>/
+        </template>
+        /
       </vxe-grid>
     </el-card>
   </div>
@@ -950,10 +955,10 @@ onMounted(() => {
         <template v-else-if="item.type === 'select'">
           <el-select
               v-model="taskRuleForm[item.prop]"
-              :placeholder="item.placeholder"
-              :multiple="item.multiple"
               :collapse-tags="item.collapseTags"
               :collapse-tags-tooltip="item.collapseTagsTooltip"
+              :multiple="item.multiple"
+              :placeholder="item.placeholder"
           >
             <el-option
                 v-for="option in item.options"
@@ -966,11 +971,11 @@ onMounted(() => {
         <template v-else-if="item.type === 'autocomplete'">
           <el-autocomplete
               v-model="taskRuleForm[item.prop]"
+              :clearable="item.clearable"
               :debounce="item.debounce"
               :fetch-suggestions="item.fetchSuggestions"
-              :trigger-on-focus="item.triggerOnFocus"
-              :clearable="item.clearable"
               :placeholder="item.placeholder"
+              :trigger-on-focus="item.triggerOnFocus"
               @select="item.onSelect"
           >
             <template v-slot="{ item }">
@@ -1023,6 +1028,7 @@ onMounted(() => {
   border: none;
   box-shadow: none;
 }
+
 :deep(.vxe-table--header .vxe-header--row th .vxe-cell,
 .vxe-table--body .vxe-body--row td .vxe-cell) {
   padding-left: 5px !important;

+ 2 - 2
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);
 }
 
 // 导出数据接口
@@ -293,7 +293,7 @@ async function handleExport() {
     const params = {
       page: gridOptions.pagerConfig.currentPage,
       limit: gridOptions.pagerConfig.pageSize,
-      task_ids: props.taskIds,
+      task_ids: taskIds.value,
       day_start_date: dayStartDate.value,
       day_end_date: dayEndDate.value,
       week_start_date: weekStart.value,

+ 66 - 3
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>