更新

src/components/exportDialog/index.vue

@@ -24,7 +24,7 @@ defineExpose({ getRef });
 
 <template>
   <el-form ref="ruleFormRef" :model="newFormInline" :rules="formRules" label-width="120px">
-    <el-form-item label="选择时间" prop="time">
+    <el-form-item label="选择导出时间" prop="time">
       <el-date-picker v-model="newFormInline.time" format="YYYY-MM-DD HH:mm:ss" :disabled-date="disabledDate"
         value-format="YYYY-MM-DD HH:mm:ss" type="datetimerange" range-separator="至" start-placeholder="开始日期"
         end-placeholder="结束日期">

src/views/newuser/backpackList/hook.tsx

@@ -1,7 +1,11 @@
-import { ref } from "vue";
+import { ref, h } from "vue";
 import {
   queryList
 } from "@/api/modules/backpack";
+import { utils, writeFile } from "xlsx";
+import { message } from "@/utils/message";
+import ExportForm from '@/components/exportDialog/index.vue';
+import { addDialog } from "@/components/ReDialog";
 export function useData() {
   const loading = ref(true);
   const tableList = ref([]);
@@ -94,6 +98,67 @@ export function useData() {
     pagination.value.currentPage = val;
     onSearch(searchForm.value);
   };
+  const exportFormRef = ref(null)
+  const exportExcel = () => {
+    let exportTableList = []
+    addDialog({
+      title: `导出数据`,
+      props: {
+        formInline: {
+          time: ''
+        }
+      },
+      width: "40%",
+      closeOnClickModal: false,
+      contentRenderer: () => h(ExportForm, { ref: exportFormRef, formInline: null }),
+      beforeSure: (done, { options }) => {
+        const FormRef = exportFormRef.value.getRef();
+        const curData = options.props.formInline;
+        const exportData = async (formData) => {
+          const { data, code } = await queryList({
+            ...formData,
+            page: 1,
+            page_limit: 20000
+          });
+          if (code) {
+            exportTableList = data.lists;
+            const res = exportTableList.map(item => {
+              const arr = [];
+              tableLabel.value.forEach(column => {
+                arr.push(item[column.prop as string]);
+              });
+              return arr;
+            });
+            const titleList = [];
+            tableLabel.value.forEach(column => {
+              titleList.push(column.label);
+            });
+            res.unshift(titleList);
+            const workSheet = utils.aoa_to_sheet(res);
+            const workBook = utils.book_new();
+            utils.book_append_sheet(workBook, workSheet, "数据报表");
+            writeFile(workBook, `会员背包统计${formData.begin_time} - ${formData.end_time}.xlsx`);
+            message("导出成功", {
+              type: "success"
+            });
+            done()
+          } else {
+            message("获取数据失败，请重试！", {
+              type: "error"
+            });
+          }
+        }
+        FormRef.validate(valid => {
+          if (valid) {
+            if (curData.time && curData.time.length) {
+              exportData({ begin_time: curData.time[0] || '', end_time: curData.time[1] || '' })
+            }
+          }
+        });
+      }
+    });
+
+  }
   return {
     searchForm,
     searchLabel,
@@ -104,6 +169,7 @@ export function useData() {
     pagination,
     handleSizeChange,
     handleCurrentChange,
+    exportExcel,
     loading,
     detailData
   };

src/views/newuser/backpackList/index.vue

@@ -13,6 +13,7 @@ const {
 	tableList,
 	pagination,
 	tableLabel,
+	exportExcel,
 	handleSizeChange,
 	handleCurrentChange,
 	loading
@@ -33,7 +34,12 @@ defineOptions({
 			<PureTableBar title="背包列表" :class="[isShow && !deviceDetection() ? '!w-[60vw]' : 'w-full']" :columns="tableLabel"
 				@refresh="onSearch">
 				<template #buttons>
-					<div v-if="detailData">总计：礼物 {{ detailData.gift_count }} 个，价值 {{ detailData.gift_total }} 金币</div>
+					<div v-if="detailData" style="display:inline-flex;align-items: center;" class="mr-5">总计：礼物 {{
+						detailData.gift_count }} 个，价值
+						{{ detailData.gift_total }} 金币</div>
+					<el-button type="primary" @click="exportExcel">
+						导出
+					</el-button>
 				</template>
 				<template v-slot="{ size, dynamicColumns }">
 					<pure-table ref="tableRef" align-whole="center" showOverflowTooltip table-layout="auto" default-expand-all

src/views/room/roomList/hook.tsx

@@ -3,7 +3,9 @@ import editForm from "./form.vue";
 import detailView from './detail.vue';
 import TurntableView from './Turntable/Turntable.vue';
 import XunLeHuiView from './XunLeHui/index.vue';
+import { utils, writeFile } from "xlsx";
 import { message } from "@/utils/message";
+import ExportForm from '@/components/exportDialog/index.vue';
 import {
   queryList,
   getRoomDetail,
@@ -243,6 +245,67 @@ export function useData() {
       });
     })
   }
+  const exportFormRef = ref(null)
+  const exportExcel = () => {
+    let exportTableList = []
+    addDialog({
+      title: `导出数据`,
+      props: {
+        formInline: {
+          time: ''
+        }
+      },
+      width: "40%",
+      closeOnClickModal: false,
+      contentRenderer: () => h(ExportForm, { ref: exportFormRef, formInline: null }),
+      beforeSure: (done, { options }) => {
+        const FormRef = exportFormRef.value.getRef();
+        const curData = options.props.formInline;
+        const exportData = async (formData) => {
+          const { data, code } = await queryList({
+            ...formData,
+            page: 1,
+            page_limit: 20000
+          });
+          if (code) {
+            exportTableList = data.lists;
+            const res = exportTableList.map(item => {
+              const arr = [];
+              tableLabel.value.forEach(column => {
+                arr.push(item[column.prop as string]);
+              });
+              return arr;
+            });
+            const titleList = [];
+            tableLabel.value.forEach(column => {
+              titleList.push(column.label);
+            });
+            res.unshift(titleList);
+            const workSheet = utils.aoa_to_sheet(res);
+            const workBook = utils.book_new();
+            utils.book_append_sheet(workBook, workSheet, "数据报表");
+            writeFile(workBook, `房间列表统计${formData.begin_time} - ${formData.end_time}.xlsx`);
+            message("导出成功", {
+              type: "success"
+            });
+            done()
+          } else {
+            message("获取数据失败，请重试！", {
+              type: "error"
+            });
+          }
+        }
+        FormRef.validate(valid => {
+          if (valid) {
+            if (curData.time && curData.time.length) {
+              exportData({ begin_time: curData.time[0] || '', end_time: curData.time[1] || '' })
+            }
+          }
+        });
+      }
+    });
+
+  }
   return {
     searchForm,
     searchLabel,
@@ -254,6 +317,7 @@ export function useData() {
     handleSizeChange,
     handleCurrentChange,
     loading,
+    exportExcel,
     viewDetail,
     editDialog,
     viewTurntableData,

src/views/room/roomList/index.vue

@@ -19,6 +19,7 @@ const {
   viewDetail,
   viewTurntableData,
   loading,
+  exportExcel,
   editDialog,
   viewXunLeHuiData
 } = useData();
@@ -38,6 +39,9 @@ onMounted(() => {
       <PureTableBar title="房间列表" :class="[isShow && !deviceDetection() ? '!w-[60vw]' : 'w-full']" :columns="tableLabel"
         @refresh="onSearch">
         <template #buttons>
+          <el-button type="primary" @click="exportExcel">
+            导出
+          </el-button>
           <!-- <el-button type="primary" :icon="useRenderIcon(AddFill)" @click="openDialog('新增', {})">
             新增房间
           </el-button> -->