🎨 feat<任务管理>: 计划销售额添加下载功能

--店铺信息添加planInfo，用于权限管理

src/views/reportManage/TaskManage/api.ts

@@ -99,3 +99,11 @@ export function postNoticePerson(body) {
     data: body,
   });
 }
+
+export function getPlanList(query) {
+  return request({
+    url: '/api/report_manage/summary-tasks/data/plan/all/',
+    method: 'GET',
+    params: query,
+  });
+}

src/views/reportManage/TaskManage/components/planInfo.vue

@@ -0,0 +1,445 @@
+<script lang="ts" setup>
+/**
+ * @Name: PlanningSales.vue
+ * @Description: 计划销售额录入
+ * @Author: xinyan
+ */
+
+import {
+  exportPlanSalesData,
+  getPlanSalesData,
+  postCreatePlanSalesData,
+  postUpdatePlanSalesData
+} from '/src/views/reportManage/dataCenter/api';
+import { planColumns } from '/src/views/reportManage/TaskManage/utils/columns';
+import { reactive, ref } from 'vue';
+import { VxeGridInstance } from 'vxe-table';
+import dayjs from 'dayjs';
+import Selector from '/src/views/reportManage/dataCenter/normalDisplay/components/Selector/index.vue';
+import { ElMessage, FormInstance, FormRules } from 'element-plus';
+import { dateType } from '/src/views/reportManage/TaskManage/utils/enum';
+import { exportTaskData, getPlanList } from '/src/views/reportManage/TaskManage/api';
+
+// 年份选择器
+const currentYear = ref('');
+// 筛选查询
+const selectorRef = ref(null);
+const taskIds = ref({});
+
+// 表单数据
+const dialogVisible = ref(false);
+const formRef = ref<FormInstance>();
+const formData = reactive({
+  january: null,
+  february: null,
+  march: null,
+  april: null,
+  may: null,
+  june: null,
+  july: null,
+  august: null,
+  september: null,
+  october: null,
+  november: null,
+  december: null
+});
+const rules = reactive<FormRules>({
+  january: [{ required: true, message: '请输入1月的计划销售额', trigger: 'blur' }],
+  february: [{ required: true, message: '请输入2月的计划销售额', trigger: 'blur' }],
+  march: [{ required: true, message: '请输入3月的计划销售额', trigger: 'blur' }],
+  april: [{ required: true, message: '请输入4月的计划销售额', trigger: 'blur' }],
+  may: [{ required: true, message: '请输入5月的计划销售额', trigger: 'blur' }],
+  june: [{ required: true, message: '请输入6月的计划销售额', trigger: 'blur' }],
+  july: [{ required: true, message: '请输入7月的计划销售额', trigger: 'blur' }],
+  august: [{ required: true, message: '请输入8月的计划销售额', trigger: 'blur' }],
+  september: [{ required: true, message: '请输入9月的计划销售额', trigger: 'blur' }],
+  october: [{ required: true, message: '请输入10月的计划销售额', trigger: 'blur' }],
+  november: [{ required: true, message: '请输入11月的计划销售额', trigger: 'blur' }],
+  december: [{ required: true, message: '请输入12月的计划销售额', trigger: 'blur' }]
+});
+// 表单项配置，用于动态生成输入框
+const formItems = [
+  { field: 'january', label: '1月' },
+  { field: 'february', label: '2月' },
+  { field: 'march', label: '3月' },
+  { field: 'april', label: '4月' },
+  { field: 'may', label: '5月' },
+  { field: 'june', label: '6月' },
+  { field: 'july', label: '7月' },
+  { field: 'august', label: '8月' },
+  { field: 'september', label: '9月' },
+  { field: 'october', label: '10月' },
+  { field: 'november', label: '11月' },
+  { field: 'december', label: '12月' }
+];
+// 表格
+const currentRow = ref('');
+const months = [
+  '1月', '2月', '3月', '4月', '5月',
+  '6月', '7月', '8月', '9月', '10月',
+  '11月', '12月'
+];
+const originalData = ref([]);
+
+const xGrid = ref<VxeGridInstance>();
+const activeEditRow = ref(null);
+
+const gridOptions = reactive({
+  border: 'inner',
+  // showOverflow: true,
+  height: 750,
+  loading: false,
+  round: true,
+  editConfig: {
+    trigger: 'manual',
+    mode: 'row',
+    showStatus: true,
+    autoClear: false,
+  },
+  columnConfig: {
+    resizable: true,
+  },
+  toolbarConfig: {
+    custom: true,
+    zoom: {
+      iconIn: 'vxe-icon-fullscreen',
+      iconOut: 'vxe-icon-minimize'
+    },
+    slots: {
+      // buttons: 'toolbar_buttons',
+      tools: 'toolbar_tools'
+    }
+  },
+  pagerConfig: {
+    enabled: true,
+    total: 20,
+    currentPage: 1,
+    pageSize: 20,
+    pageSizes: [10, 20, 30],
+  },
+  columns: planColumns,
+  data: [],
+});
+
+function setDefaultDate() {
+  currentYear.value = dayjs().format('YYYY');
+}
+
+const disabledDate = (time: Date) => {
+  const currentYear = new Date().getFullYear();
+  const selectedYear = time.getFullYear();
+  return selectedYear > currentYear + 1;
+};
+
+async function create(row) {
+  currentRow.value = row;
+  dialogVisible.value = true;
+}
+
+const resetForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+  formEl.resetFields();
+};
+
+async function handleSave() {
+  const monthMap = {
+    january: 1,
+    february: 2,
+    march: 3,
+    april: 4,
+    may: 5,
+    june: 6,
+    july: 7,
+    august: 8,
+    september: 9,
+    october: 10,
+    november: 11,
+    december: 12
+  };
+  const monthPlanSales = Object.keys(formData).map((month) => ({
+    month: monthMap[month], // 使用映射表获取对应的月份数字
+    planSales: parseFloat(formData[month]) || 0 // 计划销售额转换为数字
+  }));
+
+  const body = {
+    year_date: currentYear.value,
+    task: currentRow.value.task || 0,
+    month_plan_sales: monthPlanSales,
+  };
+  try {
+    await postCreatePlanSalesData(body);
+    dialogVisible.value = false;
+    await getList();
+  } catch (error) {
+    console.error('提交数据时出错:', error);
+  }
+}
+
+const submitForm = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      handleSave();
+      formEl.resetFields();
+      ElMessage.success('创建成功');
+    } else {
+      ElMessage.error('添加失败，请检查填写数据');
+    }
+  });
+};
+
+const gridEvents = {
+  pageChange({ currentPage, pageSize }) {
+    if (gridOptions.pagerConfig) {
+      gridOptions.pagerConfig.currentPage = currentPage;
+      gridOptions.pagerConfig.pageSize = pageSize;
+    }
+    getList();
+  }
+};
+
+const isMonthIdExist = (row) => {
+  return months.some(month => row[month] && row[month].id);
+};
+
+const hasActiveEditRow = (row) => {
+  const $grid = xGrid.value;
+  if ($grid) {
+    return $grid.isEditByRow(row);
+  }
+  return false;
+};
+
+const clearRowEvent = (row) => {
+  activeEditRow.value = false;
+  const $grid = xGrid.value;
+  if ($grid) {
+    $grid.clearEdit();
+  }
+};
+
+// 进入编辑模式
+const handelEditRow = (row) => {
+  activeEditRow.value = true;
+  const $grid = xGrid.value;
+  if ($grid) {
+    for (const month in row) {
+      if (row[month] && row[month].id) {
+        originalData.value = JSON.parse(JSON.stringify(row[month]));
+      }
+    }
+    $grid.setEditRow(row);
+  }
+};
+
+async function saveRow(row) {
+  const $grid = xGrid.value;
+  if ($grid) {
+    const updatedData = [];
+    for (const month in row) {
+      if (row[month] && row[month].id) {
+        const planSales = parseFloat(row[month].planSales);
+
+        if (!isNaN(planSales)) {
+          updatedData.push({
+            id: row[month].id,
+            planSales: planSales
+          });
+        }
+      }
+    }
+    try {
+      await postUpdatePlanSalesData(updatedData);
+      activeEditRow.value = false;
+      await $grid.clearEdit();
+      await getList();
+      ElMessage.success('更新成功');
+    } catch (error) {
+      ElMessage.error('更新失败，请检查填写数据');
+    }
+  }
+
+}
+
+async function getList() {
+  try {
+    gridOptions.loading = true;
+    const response = await getPlanList({
+      page: gridOptions.pagerConfig.currentPage,
+      limit: gridOptions.pagerConfig.pageSize,
+      year_date: currentYear.value,
+      task_ids: taskIds.value,
+    });
+    gridOptions.data = response.data;
+    gridOptions.pagerConfig.total = response.total;
+  } catch (error) {
+    console.error('Error fetching task data:', error);
+  } finally {
+    gridOptions.loading = false;
+  }
+}
+
+function updateDataChange(newId) {
+  if (selectorRef.value) {
+    if (gridOptions.pagerConfig) {
+      gridOptions.pagerConfig.currentPage = 1;
+    }
+    taskIds.value = newId.value;
+    getList();
+  }
+}
+
+async function handleExport() {
+  try {
+    gridOptions.loading = true;
+    const response = await exportPlanSalesData({
+      year_date: currentYear.value,
+      task_ids: taskIds.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);
+  }
+}
+
+watch(currentYear, (newVal, oldVal) => {
+  if (newVal !== oldVal) {
+    currentYear.value = dayjs(newVal).format('YYYY');
+  }
+});
+
+const cellStyle = () => {
+  return {
+    fontSize: '13px',
+    fontWeight: '500',
+  };
+};
+
+const headerCellStyle = () => {
+  return {
+    fontSize: '13px',
+  };
+};
+
+onMounted(() => {
+  setDefaultDate();
+  // getList();
+});
+</script>
+
+<template>
+  <el-card class=" my-3 mx-8 p-0">
+    <div class="flex gap-1.5 justify-between mx-2 items-center">
+      <Selector ref="selectorRef" @update:updateData="updateDataChange" />
+      <div class="demo-date-picker">
+        <div class="block">
+          <span class="demonstration">年份：</span>
+          <el-date-picker
+              v-model="currentYear"
+              :disabled-date="disabledDate"
+              placeholder="Pick a year"
+              style="width: 150px"
+              type="year"
+              @change="getList"
+          />
+        </div>
+      </div>
+    </div>
+  </el-card>
+  <el-card class="mx-8">
+    <vxe-grid ref="xGrid" :cell-style="cellStyle" :header-cell-style="headerCellStyle" v-bind="gridOptions"
+              v-on="gridEvents">
+      <template #toolbar_tools>
+        <div class="pr-2.5">
+          <el-tooltip content="下载表格" placement="top">
+            <vxe-button circle icon="vxe-icon-download" @click="handleExport"></vxe-button>
+          </el-tooltip>
+        </div>
+      </template>
+      <template #operate="{ row }">
+        <template v-if="hasActiveEditRow(row)">
+          <el-button link size="small" @click="clearRowEvent(row)">取消</el-button>
+          <el-button link size="small" type="warning" @click="saveRow(row)">保存</el-button>
+        </template>
+        <template v-else>
+          <el-button :disabled="!isMonthIdExist(row)||activeEditRow" link size="small" type="success"
+                     @click="handelEditRow(row)">
+            修改
+          </el-button>
+        </template>
+        <el-button v-if="!hasActiveEditRow(row)" :disabled="isMonthIdExist(row)||activeEditRow" link size="small"
+                   type="primary"
+                   @click="create(row)">创建
+        </el-button>
+      </template>
+      <template v-for="col in planColumns" #[`${col.slots?.edit}`]="{ row }">
+        <el-input v-model="row[col.field].planSales" />
+      </template>
+    </vxe-grid>
+  </el-card>
+  <el-dialog v-model="dialogVisible" :before-close="handleClose" style="border-radius: 10px;"
+             title="创建计划销售额" width="600">
+    <template #title>
+      <span class="text-xl">创建计划销售额</span>
+      <div class="mt-2" style="display: flex; align-items: center;color: darkgray">
+        <div style="margin-right: 8px;">
+          平台编号:
+          <span class="italic pl-1 pr-2">{{ currentRow.platformNumber }}</span>
+        </div>
+        <div>
+          平台名称:
+          <span class="italic pl-1">{{ currentRow.platformName }}</span>
+        </div>
+      </div>
+    </template>
+    <el-form
+        ref="formRef"
+        :model="formData"
+        :rules="rules"
+        label-position="top"
+        label-width="auto"
+        status-icon
+    >
+      <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px">
+        <el-form-item v-for="item in formItems" :label="`${item.label}计划销售额`" :prop="item.field">
+          <el-input v-model="formData[item.field]"></el-input>
+        </el-form-item>
+      </div>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="dayFormVisible = false ;resetForm(formRef)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formRef)">确定</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style scoped>
+.demo-date-picker {
+  display: flex;
+  flex-direction: row-reverse;
+}
+
+.block {
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+  overflow: hidden;
+  /* width: 100%; */
+}
+
+.demo-date-picker .demonstration {
+  color: var(--el-text-color-secondary);
+  font-size: 14px;
+  white-space: nowrap;
+  margin-right: 2px;
+}
+</style>

src/views/reportManage/TaskManage/index.vue

@@ -16,9 +16,12 @@ import {
   postUpdateTaskStatus
 } from '/src/views/reportManage/TaskManage/api.ts';
 import { ComponentSize, ElMessage, FormInstance, FormRules } from 'element-plus';
-import { Delete, Message, Plus } from '@element-plus/icons-vue';
+import { Delete, Message, Plus, TopRight } from '@element-plus/icons-vue';
 import { dateType, requiredFields } from '/@/views/reportManage/TaskManage/utils/enum';
 import { taskColumns } from '/@/views/reportManage/TaskManage/utils/columns';
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
 
 const selectorRef = ref(null);
 const message = ref('');
@@ -788,6 +791,16 @@ const formItems = ref([
   { label: 'VAT税号公司名称', prop: 'vatCompany', type: 'input', placeholder: '请输入VAT税号公司名称' },
 ]);
 
+const handelPlanSales = () => {
+  const url = router.resolve({
+    name: 'planInfo',
+    // query: {
+    //   dateType: dateType.value,
+    // }
+  }).href;
+  window.open(url, '_blank');
+};
+
 // 表格样式
 const cellStyle = () => {
   return {
@@ -813,8 +826,12 @@ onMounted(() => {
 
 <template>
   <div class="p-2.5">
-    <el-card class="custom-card-style flex gap-1.5 justify-between" shadow="hover">
-      <Selector ref="selectorRef" @update:filteredData="filteredDataChange" />
+    <el-card shadow="hover">
+      <div class="custom-card-style flex gap-1.5 justify-between" >
+        <Selector ref="selectorRef" @update:filteredData="filteredDataChange" />
+        <el-button :icon="TopRight" text bg @click="handelPlanSales">计划销售额</el-button>
+      </div>
+
     </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/TaskManage/utils/columns.ts

@@ -303,17 +303,17 @@ export const planColumns = ref([
   // { field: 'ipaddress', title: 'IP 地址', width: 150 },
   // { field: 'company', title: '公司', width: 200 },
   // { field: 'platform', title: '平台', width: 100 },
-  { field: '1月', title: '1月计划销售额', width: 120,editRender: {}, slots: { edit: 'january' }, align: 'center' ,formatter: ({ cellValue }) => cellValue?.planSales || '--' },
-  { field: '2月', title: '2月计划销售额', width: 120, editRender: {}, slots: { edit: 'february' }, align: 'center' ,formatter: ({ cellValue }) => cellValue?.planSales || '--'},
-  { field: '3月', title: '3月计划销售额', width: 120, editRender: {}, slots: { edit: 'march' }, align: 'center' ,formatter: ({ cellValue }) => cellValue?.planSales || '--'},
-  { field: '4月', title: '4月计划销售额', width: 120, editRender: {}, slots: { edit: 'april' }, align: 'center' ,formatter: ({ cellValue }) => cellValue?.planSales || '--'},
-  { field: '5月', title: '5月计划销售额', width: 120, editRender: {}, slots: { edit: 'may' }, align: 'center' ,formatter: ({ cellValue }) => cellValue?.planSales || '--'},
-  { field: '6月', title: '6月计划销售额', width: 120, editRender: {}, slots: { edit: 'june' }, align: 'center' ,formatter: ({ cellValue }) => cellValue?.planSales || '--'},
-  { field: '7月', title: '7月计划销售额', width: 120, editRender: {}, slots: { edit: 'july' }, align: 'center' ,formatter: ({ cellValue }) => cellValue?.planSales || '--'},
-  { field: '8月', title: '8月计划销售额', width: 120, editRender: {}, slots: { edit: 'august' }, align: 'center' ,formatter: ({ cellValue }) => cellValue?.planSales || '--'},
-  { field: '9月', title: '9月计划销售额', width: 120, editRender: {}, slots: { edit: 'september' }, align: 'center' ,formatter: ({ cellValue }) => cellValue?.planSales || '--'},
-  { field: '10月', title: '10月计划销售额', width: 120, editRender: {}, slots: { edit: 'october' }, align: 'center' ,formatter: ({ cellValue }) => cellValue?.planSales || '--'},
-  { field: '11月', title: '11月计划销售额', width: 120, editRender: {}, slots: { edit: 'november' }, align: 'center' ,formatter: ({ cellValue }) => cellValue?.planSales || '--'},
-  { field: '12月', title: '12月计划销售额', width: 120, editRender: {}, slots: { edit: 'december' }, align: 'center' ,formatter: ({ cellValue }) => cellValue?.planSales || '--'},
+  { field: '1月', title: '1月计划销售额', width: 125,editRender: {}, slots: { edit: 'january' }, align: 'center' ,formatter: ({ cellValue }) => cellValue?.planSales || '--' },
+  { field: '2月', title: '2月计划销售额', width: 125, editRender: {}, slots: { edit: 'february' }, align: 'center' ,formatter: ({ cellValue }) => cellValue?.planSales || '--'},
+  { field: '3月', title: '3月计划销售额', width: 125, editRender: {}, slots: { edit: 'march' }, align: 'center' ,formatter: ({ cellValue }) => cellValue?.planSales || '--'},
+  { field: '4月', title: '4月计划销售额', width: 125, editRender: {}, slots: { edit: 'april' }, align: 'center' ,formatter: ({ cellValue }) => cellValue?.planSales || '--'},
+  { field: '5月', title: '5月计划销售额', width: 125, editRender: {}, slots: { edit: 'may' }, align: 'center' ,formatter: ({ cellValue }) => cellValue?.planSales || '--'},
+  { field: '6月', title: '6月计划销售额', width: 125, editRender: {}, slots: { edit: 'june' }, align: 'center' ,formatter: ({ cellValue }) => cellValue?.planSales || '--'},
+  { field: '7月', title: '7月计划销售额', width: 125, editRender: {}, slots: { edit: 'july' }, align: 'center' ,formatter: ({ cellValue }) => cellValue?.planSales || '--'},
+  { field: '8月', title: '8月计划销售额', width: 125, editRender: {}, slots: { edit: 'august' }, align: 'center' ,formatter: ({ cellValue }) => cellValue?.planSales || '--'},
+  { field: '9月', title: '9月计划销售额', width: 125, editRender: {}, slots: { edit: 'september' }, align: 'center' ,formatter: ({ cellValue }) => cellValue?.planSales || '--'},
+  { field: '10月', title: '10月计划销售额', width: 133, editRender: {}, slots: { edit: 'october' }, align: 'center' ,formatter: ({ cellValue }) => cellValue?.planSales || '--'},
+  { field: '11月', title: '11月计划销售额', width: 133, editRender: {}, slots: { edit: 'november' }, align: 'center' ,formatter: ({ cellValue }) => cellValue?.planSales || '--'},
+  { field: '12月', title: '12月计划销售额', width: 133, editRender: {}, slots: { edit: 'december' }, align: 'center' ,formatter: ({ cellValue }) => cellValue?.planSales || '--'},
   { title: '操作', width: 120, slots: { default: 'operate' }, align: 'center' , fixed: 'right'},
 ])

src/views/reportManage/dataCenter/api.ts

@@ -289,4 +289,14 @@ export function postUpdatePlanSalesData(body) {
     method: 'POST',
     data: body,
   });
+}
+
+// 导出接口
+export function exportPlanSalesData(query) {
+  return request({
+    url: '/api/report_manage/plan/download/',
+    method: 'GET',
+    params: query,
+    responseType: 'blob'
+  });
 }

src/views/reportManage/dataCenter/normalDisplay/components/PlanningSales.vue

@@ -6,6 +6,7 @@
  */
 
 import {
+  exportPlanSalesData,
   getPlanSalesData,
   postCreatePlanSalesData,
   postUpdatePlanSalesData
@@ -16,6 +17,8 @@ import { VxeGridInstance } from 'vxe-table';
 import dayjs from 'dayjs';
 import Selector from '/@/views/reportManage/dataCenter/normalDisplay/components/Selector/index.vue';
 import { ElMessage, FormInstance, FormRules } from 'element-plus';
+import { dateType } from '/@/views/reportManage/TaskManage/utils/enum';
+import { exportTaskData } from '/@/views/reportManage/TaskManage/api';
 
 // 年份选择器
 const currentYear = ref('');
@@ -27,18 +30,18 @@ const taskIds = ref({});
 const dialogVisible = ref(false);
 const formRef = ref<FormInstance>();
 const formData = reactive({
-  january: 3213,
-  february: 3213,
-  march: 3213,
-  april: 3213,
-  may: 3213,
-  june: 3123,
-  july: 312,
-  august: 312,
-  september: 453,
-  october: 543534,
-  november: 543,
-  december: 543
+  january: null,
+  february: null,
+  march: null,
+  april: null,
+  may: null,
+  june: null,
+  july: null,
+  august: null,
+  september: null,
+  october: null,
+  november: null,
+  december: null
 });
 const rules = reactive<FormRules>({
   january: [{ required: true, message: '请输入1月的计划销售额', trigger: 'blur' }],
@@ -96,6 +99,17 @@ const gridOptions = reactive({
   columnConfig: {
     resizable: true,
   },
+  toolbarConfig: {
+    custom: true,
+    zoom: {
+      iconIn: 'vxe-icon-fullscreen',
+      iconOut: 'vxe-icon-minimize'
+    },
+    slots: {
+      // buttons: 'toolbar_buttons',
+      tools: 'toolbar_tools'
+    }
+  },
   pagerConfig: {
     enabled: true,
     total: 20,
@@ -275,6 +289,26 @@ function updateDataChange(newId) {
   }
 }
 
+async function handleExport() {
+  try {
+    gridOptions.loading = true;
+    const response = await exportPlanSalesData({
+      year_date: currentYear.value,
+      task_ids: taskIds.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);
+  }
+}
+
 watch(currentYear, (newVal, oldVal) => {
   if (newVal !== oldVal) {
     currentYear.value = dayjs(newVal).format('YYYY');
@@ -322,6 +356,13 @@ onMounted(() => {
   <el-card class="mx-8">
     <vxe-grid ref="xGrid" :cell-style="cellStyle" :header-cell-style="headerCellStyle" v-bind="gridOptions"
               v-on="gridEvents">
+      <template #toolbar_tools>
+        <div class="pr-2.5">
+          <el-tooltip content="下载表格" placement="top">
+            <vxe-button circle icon="vxe-icon-download" @click="handleExport"></vxe-button>
+          </el-tooltip>
+        </div>
+      </template>
       <template #operate="{ row }">
         <template v-if="hasActiveEditRow(row)">
           <el-button link size="small" @click="clearRowEvent(row)">取消</el-button>

src/views/reportManage/dataCenter/normalDisplay/components/TableDataDisplay.vue

@@ -343,9 +343,6 @@ const handleImport = () => {
 const handelPlanSales = () => {
   const url = router.resolve({
     name: 'PlanningSales',
-    // query: {
-    //   dateType: dateType.value,
-    // }
   }).href;
   window.open(url, '_blank');
 };
@@ -494,7 +491,7 @@ onMounted(() => {
         <el-button icon="plus" target="_blank" type="primary" @click="handleImport">数据录入</el-button>
         <el-button v-if="dateType === 'month'" text bg
                    icon="plus" target="_blank"
-                   type="i" @click="handelPlanSales">
+                   @click="handelPlanSales">
           计划销售额
         </el-button>
       </template>