房间详情增加流水信息

src/views/room/roomList/detail.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref, h, onMounted } from "vue";
-const props = defineProps(["tableData"]);
+import { utils, writeFile } from "xlsx";
+import { message } from "@/utils/message";
 import {
   getRoomDetail,
   getRoomWaterFlow,
   getRoomEnterByUser
 } from "@/api/modules/room";
+const props = defineProps(["tableData"]);
 const dataBytable = ref({ ...props.tableData })
 const roomDetail = ref(null)
 const activeIndex = ref("1")
@@ -78,6 +80,28 @@ const getFlowData = async (index) => {
     }
   }
 }
+const getExportData = async (index) => {
+  if (index === 1) {
+    const { data, code } = await getRoomWaterFlow({
+      room_id: dataBytable.value.room_id,
+      page: 1,
+      page_limit: 10000,
+      type: tagValue.value
+    })
+    if (code) {
+      return data
+    }
+  } else {
+    const { data, code } = await getRoomEnterByUser({
+      room_id: dataBytable.value.room_id,
+      page: 1,
+      page_limit: 10000,
+    })
+    if (code) {
+      return data
+    }
+  }
+}
 const flowTableList = ref([])
 const dynamicflowColumns = ref([
   {
@@ -150,6 +174,38 @@ const changeType = (val) => {
   flowTableList.value = []
   getFlowData(activeIndex.value == '1' ? 1 : 2)
 }
+const exportExcal = async () => {
+  let exportTableList = []
+  const data = await getExportData(activeIndex.value == '1' ? 1 : 2)
+  console.log(data)
+  if (data) {
+    exportTableList = data.lists;
+    const res = exportTableList.map(item => {
+      const arr = [];
+      dynamicflowColumns.value.forEach(column => {
+        arr.push(item[column.prop as string]);
+      });
+      return arr;
+    });
+    const titleList = [];
+    dynamicflowColumns.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, "数据报表");
+    const TagName = tagList.value.filter(ele => { return ele.value == tagValue.value })
+    writeFile(workBook, `房间${TagName.length ? TagName.value.label : '流水'}信息.xlsx`);
+    message("导出成功", {
+      type: "success"
+    });
+  } else {
+    message("获取数据失败，请重试！", {
+      type: "error"
+    });
+  }
+}
 // 
 </script>
 <template>
@@ -185,7 +241,11 @@ const changeType = (val) => {
                 :type="tagValue === item.value ? '' : 'info'" v-for="item in tagList" :key="item.value">{{
                   item.label }}</el-tag>
             </div>
-            <div>总计：{{ PriceTotal }}金币</div>
+
+            <div style="display: inline-flex;align-items: center;">
+              <div class="mr-5"><el-button size="small" type="primary" @click="exportExcal">导出当前数据</el-button></div>
+              总计：{{ PriceTotal }}金币
+            </div>
           </div>
           <pure-table class="mt-5" ref="tableRef" align-whole="center" showOverflowTooltip table-layout="auto"
             default-expand-all row-key="id" :adaptiveConfig="{ offsetBottom: 108 }" :data="flowTableList"